【react】使用react-router-dom插件做路由管理

操作步骤：

安装插件

npm i --s react-router react-router-dom

这里安装的版本是v6，各位安装后要注意版本，因为后面代码的写法v5和v6版本的不一样。可以根据自己的插件版本找代码参考。

路由对象

// 引入组件
import App from "../components/App";
import FindSmileFace from "../components/FindSmileFace";
import SuspensionBall from '../components/SuspensionBall'

// 路由对象
const rootRoutes = [
    {
        name: '',
        path: '/',
        component: App
    },
    {
        name: 'toDoList',
        path: '/toDoList',
        component: App
    },
    {
        name: 'findSmileFace',
        path: '/findSmileFace',
        component: FindSmileFace,
    },
    {
        name: 'suspensionBall',
        path: '/suspensionBall',
        component: SuspensionBall,
    }
]

export {
    rootRoutes
}

实现导航栏和渲染路由路径对应的组件

components/index.js文件：

import React from "react";
import { Route, HashRouter as Router, Link, Routes } from 'react-router-dom'
import { rootRoutes } from "../routes/index.js";

function Nav() {
    return (
        <div>
            <Router>
                {/* 遍历路由对象rootRoutes生成导航栏 */}
                {rootRoutes.map((route, key) => {
                    return (
                        <div key={key}>
                            <Link to={route.path}>{route.name}</Link>
                            {route.children && route.children.map((route, key) => {
                                return (
                                    <div style={{ 'marginLeft': '10px' }} key={key}>
                                        <Link to={route.path}>{route.name}</Link>
                                    </div>
                                )
                            })}
                        </div>
                    )
                })}
                
                {/* 遍历路由对象，渲染路径对应的组件 */}
                <Routes>
                    {
                        rootRoutes.map((route, key) => {
                            return <Route
                                key={'route-' + key}
                                exact={route.exact}
                                path={route.path}
                                element={<route.component />} >
                                {route.children && route.children.map((route, key) => {
                                    return <Route
                                        key={'route-' + key}
                                        exact={route.exact}
                                        path={route.path}
                                        element={<route.component />} >
                                    </Route>
                                })}
                            </Route>
                        })
                    }
                </Routes>
            </Router>
        </div >
    )
}

export default Nav;

 实现效果：

---

遇到的问题

index.js:37 Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

原因：react-router-dom插件v5和v6版本写法不同，原先我参考的是v5的写法

v5：Route组件可以直接写在Router里面

<Router>
    {/* 遍历路由对象，渲染路径对应的组件 */}
    {
        rootRoutes.map((route, key) => {
            return <Route
                key={'route-' + key}
                exact={route.exact}
                path={route.path}
                component={<route.component />} >
                {route.children && route.children.map((route, key) => {
                    return <Route
                        key={'route-' + key}
                        exact={route.exact}
                        path={route.path}
                        component={<route.component />} >
                    </Route>
                })}
            </Route>
        })
    }

</Router>

v6：Route组件必须写在Routes里面：

<Router>
    <Routes>
        {
            rootRoutes.map((route, key) => {
                return <Route
                    key={'route-' + key}
                    exact={route.exact}
                    path={route.path}
                    element={<route.component />} >
                    {route.children && route.children.map((route, key) => {
                        return <Route
                            key={'route-' + key}
                            exact={route.exact}
                            path={route.path}
                            element={<route.component />} >
                        </Route>
                    })}
                </Route>
            })
        }
    </Routes>
</Router>

No routes matched location "/findSmileFace" 

 原因：react-router-dom插件v5和v6版本写法不同

v5：Route组件使用component属性承接组件

v6：Route组件使用element属性承接组件

写法参考上面v5、v6的代码。