1.下载6版本的react-router-dom
yarn add react-router-dom
2.引入
import { NavLink, useRoutes} from 'react-router-dom'
3.创建路由表
//在src目录下建立一个文件夹routes,在该目录下新建一个index.js,随后写下自己需要的路由组件
import { Navigate } from 'react-router-dom'
import Home from '../pages/Home'
import About from '../pages/About'
const indexRouter = [
{
path: '/about',
//这里是你需要的路由组件
element: <About />
},
{
path: '/home',
element: <Home />
},
//使用Navigate进行重定向
{
path: '/',
element: <Navigate to='/about' />
}
]
export default indexRouter
4.在页面下进行引入并展示
import indexRouter from './routes'
//在function定义
const elementRoute = useRoutes(indexRouter)
//在页面引入
<div className="panel-body">
{elementRoute}
</div>
5.页面代码
import React from 'react'
import { NavLink, useRoutes,} from 'react-router-dom'
import indexRouter from './routes'
import './App.css'
export default function App() {
function active({isActive}) {
return isActive ? 'back' : ''
}
const elementRoute = useRoutes(indexRouter)
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink to='/about' className={active}>About</NavLink>
<NavLink to='/home' className={active}>Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{elementRoute}
</div>
</div>
</div>
</div>
</div>
)
}