最近新写了一个react项目, 发现react router默认装到了v6版本,而v6与v5比还是有比较大的更新的,这里记录一下

首先就是switch被routes替换, route废弃了component与render属性, Redirect被Navigate替换

以前我们的路由写法(v5)

<BrowserRouter>
  <Switch>
    <Route path='/ui' component={Ui} />
    <Route path='/login' component={Login} />
    <Route path='/error' component={ErrorPage} />
    <Redirect to='/ui' />
  </Switch>
</BrowserRouter>

现在(v6)

<BrowserRouter>
  <Routes>
    <Route path='/login' element={<Login />} />
    <Route path='/error' element={<ErrorPage />} />
    <Route path='*' element={<Navigate to='/ui' />} />
  </Routes>
</BrowserRouter>

可以看到在新版路由中,route的element属性需要传入一个组件,而不是组件名,默认跳转需要用*路由匹配,然后使用Navigate跳转

嵌套路由(v5)

在v5中,我们定义一个大组件,在内容区填写路由,根据路由渲染不同的内容区,在v6中也发生了改变

v5写法

App.js

<BrowserRouter>
  <Route component=<Ui> />
</BrowserRouter>

Ui.js

<Header/>
<Content>
  <Switch>
    <Route path='/ui/api/logs' component={ApiLogs} />
    <Route path='/ui/user/group' component={GroupList} />
  </Switch>
</Content>

而在v6中,这个写法发生了变化
App.js

<Routes>
  <Route path="/" element={<Layout />} >
    <Route path="dashboard" element={<Dashboard />} />
  </Route>
  <Route path="/login" element={<Login />} />
  <Route path="*" element={<Navigate to="/" />} />
</Routes>

Ui.js

<Header/>
<Content>
  <Outlet/>
</Content>

可以看到,现在路由直接写在最外侧,在需要根据路由动态渲染的地方,使用Outlet这个组件进行占位

关于传参

在Link中, state的传参方式发生了变化

在传参的地方

<Link to="/view" state={{data:recoder}} />

在组件里接收

import { useLocation } from 'react-router-dom'
function TicketView(props) {
    const Stateparams = useLocation()
    return <h1>hello</h1>
}

export default TicketView

Stateparams.state里面就是我们在link组件中传入的state

关于路由跳转

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


function GoBack(props) {
    const navigate = useNavigate();
    return (
        <Button
            onClick={() => navigate('/xxx', {state: {type: "xxxx"}})}
        />
    )
}

export default GoBack

使用useNavigate这个函数, 调用得到一个navigate函数, 第一个参数是路径, 第二个参数是一些选项, 比较常用的有state, 可以在路由跳转的时候进行传参

目前项目刚开始写,以后发现什么坑继续更新~