[JavaScript知识库]React-router-dom 从v5向v6

之前用react-router-dom v5版本 配合 react-router-config
https://www.npmjs.com/package/react-router-config
https://reactrouter.com/

这么搞

目录结构：

router/index.js

import React from "react";
import { useRoutes } from "react-router-dom";

import LyMine from "../pages/mine";
import LyFriend from "../pages/friend";
import LyDiscover from "../pages/discover";


export default function Router() {

    let routes = useRoutes([
        { path: "/discover", element: <LyDiscover /> },
        { path: "/mine", element: <LyMine /> },
        { path: "/friend", element: <LyFriend /> },

        // ...
    ]);
    return routes;
}

app.js

/*
 * @Description: 
 * @Autor: Blueheart
 * @Date: 2022-02-24 18:01:10
 * @LastEditTime: 2022-02-24 23:08:56
 * @FilePath: \ly-web-music\src\App.js
 */
import React, { memo } from 'react'
// import { renderRoutes } from 'react-router-config'


import LyHeader from '@/components/app-header'
import LyFooter from '@/components/app-footer'
import { HashRouter } from 'react-router-dom'
import Router from '@/router'

const App = memo(() => {
    return (
        <HashRouter>
            <LyHeader />
            <Router />
            <LyFooter />
        </HashRouter>
    )
})

export default App;