React6---配置路由表

最新推荐文章于 2025-07-09 07:55:38 发布

_Cecilia

最新推荐文章于 2025-07-09 07:55:38 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： reactjs react

本文链接：https://blog.csdn.net/weixin_44085020/article/details/123801047

react 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在React应用中配置路由表，包括在src/page中创建路由组件，src/route下建立路由表index.js，App.js组件内的配置，以及在Main.js中使用Outlet展示子路由的关键步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在src/page中创建路由组件

在这里插入图片描述
注：其中，Login和Main为并列路由， Analyse，Manage，Sign 为Main的子路由：

Main > Analyse + Manage + Sign 
Login

2.在src/route下创建路由表index.js

步骤：
1.引入路由组件
2.引入Navigate实现重定向
3.创建并暴露路由表

具体代码如下：

import Main from "../pages/Main";
import Analyse from "../pages/Analyse";
import Manage from "../pages/Manage";
import Sign from "../pages/Sign";
import Login from "../pages/Login";

import {Navigate} from 'react-router-dom'

// 路由表统一管理理由
export default([
    {
        path:'/main',  //路径
        element:<Main/>,  //组件
        //子路由
        children:[  
            {
                path:'analyse',
                element:<Analyse/>
            },
            {
                path:'manage',
                element:<Manage/>
            },
            {
                path:'sign',
                element:<Sign/>
            }
        ]
    },
    {
        path:'login', 
        element:<Login/>
    },
    {
        path:'/',
        //实现路由重定向
        element:<Navigate to='/main'/>
    }
])

3.App.js组件内

1.引入useRoutes以及route.js

import { useRoutes } from 'react-router-dom'
import route from './route'

2.根据路由表生成对应路由

 const element = useRoutes(route)

3.引用路由表

{element}

完整代码如下：

import React from 'react'
import { useRoutes } from 'react-router-dom'
import route from './route'
import './App.css'

export default function App() {
  //根据路由表生成对应路由
  const element = useRoutes(route)
  return (
    <div>
      {/* 引用路由表 */}
      {element}
    </div>
  )
}

4. 若要显示子路由，需在父级路由组件(Main.js)中引入Outlet！！！

import React from 'react'
import { Outlet } from 'react-router-dom'

export default function Main() {
  return (
    <div>
      Main
      <Outlet/>
    </div>
  )
}