react-router V6新版本新特性使用总结

1. 使用Routes标签替代Switch标签

    //v5版本
    <Switch>
      <Route path='/about' component={About}></Route>
    </Switch>
    
    //v6版本
    <Routes>
      <Route path='/about/*' element={<About />}>
        <Route path='news' element={<News />}></Route>
      </Route>
    </Routes>

2. 使用element替代component/render

使用element结构美观 传递props更加灵活方便

    //v5版本
    <Route path='/about' component={About}></Route>
    <Route path='/about' render={(props) => <About {...props} />}></Route>
    
    //v6版本
    <Route path="/about" element={<About id={id} />}></Route>

3. 重新支持路由嵌套

    <Routes>
      <Route path='/about/*' element={<About id={id} />}>
        <Route path=':id' element={<MyAbout />}></Route>
        <Route path='news' element={<News />}></Route>
      </Route>
    </Routes>

4. 使用Outlet标签渲染匹配到的路由

      <Link to="/about/news"> 新闻 </Link>
      <Link to="/about/hots"> 热门 </Link>
      <Link to="/about/list"> 列表 </Link>


      <div>-------分割线------</div>
      {/* 匹配到的about路由的子路由会被渲染到这里 */}
      <Outlet></Outlet>

5. useRoutes替代第三方库react-router-config

import React from 'react'
import { useRoutes } from 'react-router-dom'
import Home from '../pages/Home'
import Login from '../pages/Login'
import About from '../pages/About'
import News from '../pages/News'


const Router = () => {
  let routes = useRoutes([
    {
      path: '/',
      element: <Home />
    },
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/about/*',
      element: <About id={1} />,
      children: [
        { path: 'news', element: <News /> },
        { path: 'hots', element: <Hots /> },
        { path: 'list', element: <List /> },
      ]
    },
  ])
  return routes
}

export default Router

//使用
import { BrowserRouter } from 'react-router-dom'
import Router from './router'

const AppWrapper = () => {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  )
}
export default AppWrapper

6. 使用API进行路由跳转和传递参数获取参数

// 传递search参数 (v5版本)
this.props.history.push('/about/news?id='+id)
// 获取search参数 (v5版本)
this.props.location.search

// 传递params参数 (v5版本)
this.props.history.push(`/about/news/${id}`)
// 获取search参数 (v5版本)
this.props.match.params

// 传递state参数 (v5版本)
this.props.history.push(`/about/news`, { id })
// 获取state参数 (v5版本)
this.props.location.state

------------------------------------------------------

// 传递search参数 (v6版本)
const navigate = useNavigate()
navigate('/about/news?id=' + id)
// 获取search参数 (v6版本)
let location = useLocation()
console.log(location.search)

// 传递params参数 (v6版本)
const navigate = useNavigate()
navigate(`/about/news/${id}`)
// 获取search参数 (v6版本)
let params = useParams()
console.log(params)

// 传递state参数 (v6版本)
navigate('/about/news', { state: { id } })
// 获取state参数 (v6版本)
let location = useLocation()
console.log(location.state)

7. 使用Navigate 替代 Redirect

//v5版本
<Redirect to='/home' />

//v6版本
<Route path='*' element={<Navigate to='/home' />}></Route>