React 路由配置

一、使用react-router 5.x 版本实现

1, 下载react的路由模块
    npm install react-router-dom@5 --save
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件  
    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
    import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >,
          document.getElementById('root')
    );
3, 创建路由文件src/router/index.js,  并从路由模块中导入工具组件Route 
    import { Route, Switch } from "react-router-dom";
4, 创建路由组件,配置路由, 并导出
    export default function MyRouter(){
        return(
            <Switch >
                <Route exact path="/"  component={Home} />
                {/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}
                <Redirect from="/" to="/home" />
            </Switch >
        )
    }
5, 在app.js中导入路由组件
    import RouterView from './router/index';
6, 在根组件app模板中添加路由组件,即路由出口
    <RouterView></RouterView>
7, 在需要跳转的页面, 从路由模块导入工具组件 Link
    import {Link} from 'react-router-dom'
8, 使用Link组件执行路由跳转
    <Link to="/">首页/Link>

二、使用react-router 6.3 版本实现

1, 下载react的路由模块(默认最新6.3)
    npm install react-router-dom --save
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件  
    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
    import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >
    );
3, 创建路由文件src/router/index.js,  并从路由模块中导入工具组件Route 
    import { Routes, Route } from "react-router-dom";
4, 创建路由组件,配置路由, 并导出
    export default function MyRouter(){
        return(
            <Routes >
                <Route path="/" element={<Home/>} />
                <Route path="/login" element={<Login/>} />
                {/* router6的路由重定向写法 */}
                <Route path="/abc" element={<Navigate to="/login" replace/>} />
            </Routes >
        )
    }
5, 在app.js中导入路由组件
    import RouterView from './router/index';
6, 在根组件app模板中添加路由组件,即路由出口
    <RouterView></RouterView>
7, 在需要跳转的页面, 从路由模块导入工具组件 Link
    import {Link} from 'react-router-dom'
8, 使用Link组件执行路由跳转
    <Link to="/">首页/Link>

注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能

三、使用react-router 6.3 版本 + hooks 语法实现

1, 下载react的路由模块(默认最新6.3)
    npm install react-router-dom --save
 
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件 
    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
    import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >
    );

3, 创建路由文件src/router/index.js,  导入需要路由跳转的组件, 并导出路由配置数组
    import { Navigate } from "react-router-dom";
    import Home from "../pages/Home/Home"
    import User from "../pages/User/User"
    export default [
        {
            path: '/',
            element: <Home />
        },
        {
            path: '/user',
            element: <User />
        },
        {
            path: "/",
            // 路由重定向, 借助Navigate组件跳转
            element: <Navigate to="/home" replace/>
        }
    ]

4, 在app.js中导入路由配置函数useRoutes和路由配置数组routes
    import routes from './router/index';
    import { useRoutes } from "react-router-dom"

5, 在函数式组件app中创建路由出口
    const routerView = useRoutes(routes)

6, 在函数式组件app模板中渲染路由出口
    {routerView}

7, 在需要跳转的页面, 从路由模块导入工具组件 Link
    import {NavLink} from 'react-router-dom'

8, 使用NavLink组件执行路由跳转
    <NavLink to="/">首页/NavLink>

四、使用react-router 6.4 版本 + hooks 语法实现

1, 下载react的路由模块(最新6.10.0)
    npm install react-router-dom 
 
2, 创建路由文件src/router/index.jsx,  导入根组件和需要路由跳转的组件
    import { createBrowserRouter, Navigate } from "react-router-dom";
    import App from "../App";
    import Home from "../pages/Home/Home"
    
3, 创建路由对象并导出
    const router = createBrowserRouter([
        {
            path: "/",
            element: <App />,
            children: [ // 子路由
                {
                    path: "/",
                    // 路由重定向, 借助Navigate组件跳转
                    element: <Navigate to="home" replace />,
                },
                {
                    path: "home",
                    element: <Home />,
                }
            ],
        },
    ]);
    export default router;

4, 在入口文件 src/main.jsx中,从路由模块导入工具组件RouterProvider 和路由对象, 并渲染到根标签root
    import { RouterProvider  } from 'react-router-dom'
    import router from './router/index.jsx';
    ReactDOM.createRoot(document.getElementById('root')).render(
        <RouterProvider router={router} />
    )

5, 在app.jsx根组件中导入路由出口组件 Outlet 
    import { Outlet } from "react-router-dom"

6, 在app.jsx根组件中渲染路由出口
     <Outlet></Outlet>

7, 在需要跳转的页面, 从路由模块导入工具组件 NavLink
    import {NavLink} from 'react-router-dom'

8, 使用NavLink组件执行路由跳转
    <NavLink to="/">首页/NavLink>