react实现路由跳转

1.实现react路由跳转需要安装  react-router-dom

npm i react-router-dom

2.创建一个文件夹 名字router 在router文件中创建index.js文件

在index.js文件中 导入react-router-dom

react-router-dom中有两个组件createBrowserRouter,Navigate导入如

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

将需要跳转的页面导入如

import App from '../App'
import List from '../components/list/List'
import Chaiguanli from '../components/chaiguanli/Chaiguanli'

提示：我们可以将需要导入的页面统一放在一个文件中以便查找

3.将路由代码按格式写好如

const router=createBrowserRouter([
    {
        path:'/',
        element: <App></App>
    },
    {
        path:'/list',
        element: <Islogin><List></List></Islogin>,
        children:[
            {
                path:"/list/chaiguanli",
                element:<Chaiguanli></Chaiguanli>
            },
            {
                path:"/list/kuguanli",
                element:<Kuguanli></Kuguanli>
            },

            {
                path:"/list",
                element:<Navigate to='/list/xiaoguanli'></Navigate>,
            }

        ]
    },
])

如图所示list页面中有子路由可以通过children放入

Navigate：

用处是当进入list页面后子路会显示<Navigate to='/list/xiaoguanli'></Navigate>to出来的标签

如果不写会显示子路由的第一个

4.将router文件导出

export default router

以上步骤完成后找到src中的一个index.js文件如图所示：

找到后点击进入

导入

import { RouterProvider } from 'react-router-dom';
import router from './router';

如图所示第一个是react-router-dom组件

第二个是刚才导出的router注意router路径可能不一样

进入index.js会看到

完成以上后只需将RouterProvider放入<React.StrictMode>中如图

这样就可以实现路由跳转了

示例：

在跳转的页面导入import { useNavigate } from 'react-router-dom'

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

然后再函数组件中

写入  const navigate=useNavigate()

如

注释：navigate是我起的名字可以以谁便起名，但建议写规范

然后就可以实现路由跳转了

              onClick={() => {
                navigate('/list')
              }}

拜拜了，如有错误请指教