React 路由v6 抽离成路由表 重定向 及 嵌套路由

在项目文件夹Src 下面创建router文件夹，文件夹下创建index.js文件，编写路由。

index.js 写路由表， path:路由名称， element : 路由对应渲染的组件名称。 Navigate 重定向；（千万别忘 export default 导出这个路由表数组。）

import Homebox from "../componests/Homebox"
import Login from "../componests/Login"
import City from "../pages/City";
import { Navigate } from "react-router-dom"
import Largemap from "../pages/Largemap";


const routes = [
    {
        path: "/",  //路由名称
        element:  // element:跳转的组件名称    Navigate跳转
    },
    {
        path: "/homebox",
        element: , 
    },
    {
        path: "/login",
        element: 
    },
    {
        path: "/citylist",
        element: 
    },
    {
        path: "/largemap",
        element: 
    }
]


export default routes

这时候一个简单的路由表已经完成了，假如访问路由的时候，我想在App.js中渲染页面。首先在页面上导入路由表文件， 使用路由中的 useRouter( 路由表 ) 得到的结果就是，path路由对应的页面。

import React from 'react'
import { useRoutes } from "react-router-dom"  //导入路由 useRouter
import routes from './router'   //路由表


export default function App() {
  let elements = useRoutes(routes)
  return (
    

      {/* 渲染路由对应的页面 */}
      {elements}
    
  )
}

嵌套路由

上面一个简单的路由抽离写好了。 现在如果 ‘/homebox’页面下有子级页面，这时候就需要嵌套路由了。嵌套路由只需要在父路由上添加一个 children 方法，里面写法和上面一样。

const routes = [
    {
        path: "/",  //路由名称
        element:  // element:跳转的组件名称    Navigate跳转
    },
    {
        path: "/homebox",
        element: ,
        children: [
            {
                path: "/homebox",
                element: 
            },
            {
                path: "/homebox/todo",
                element: 
            },
            {
                path: "/homebox/message",
                element: 
            },
            {
                path: "/homebox/me",
                element: 
            },
        ]
    },
    {
        path: "/login",
        element: 
    },
    {
        path: "/citylist",
        element: 
    },
    {
        path: "/largemap",
        element: 
    }
]


export default routes

现在 homebox 页面有子级路由， 只需要在你想渲染的地方加上， 渲染的时候只会渲染到这个标签所占位置上。

import { Outlet } from 'react-router-dom';  //导入

{..............

............}
const Apppo = () => {
  return (
    

      

             //想要渲染的位置。
      
      

        
      
    
  );
};
export default Apppo