React-router-dom v6.x的使用

React-router-dom v6.x的使用

前言

react-router-dom v6的具体内容可以在react-router-dom文档上查看，但是是英文版，英语水平不好的同学可以在网上找大佬的翻译。
本人在公司搭了一个简单的后台管理系统的模板，今天想升级一下依赖，随便研究了一下react-router-dom6.x版的使用。总的来说，变化不是特别大。现在我把常用的几个变动总结一下，供大家参考：

1. 原先的<Switch>替换成了<Routes>

按照网上大佬的说法，<Routes>不仅完美的替代了<Switch>，语义上更能让人理解之外，还做了优化，但这部分我还没有去研究，粗略翻看了GitHub上的文档，也没有看到比较全面的说法。其用法也简单，直接替换之前的<Switch>即可。

// v6之前版本
<BrowserRouter>
    <Switch>
    	<Route />
      ...some routes
    </Switch>
</BrowserRouter>

// v6版本
<BrowserRouter>
    <Routes>
    	<Route />
      ...some routes
    </Routes>
</BrowserRouter>

2. Route中的component替换成了element

不仅仅是component替换成了element，里面的内容也从引入的变量名变成了组件，从字面意思上来理解，component原本就是组件的意思，但只传了一个组件名。element是元素的意思，我还是比较喜欢用component，然后用传组件的方式。值得一提的是，这里的element不仅仅能放组件，也能放其他的元素，因此用element也比较合理。

// v6之前版本
<BrowserRouter>
    <Switch>
    	<Route path="/index" component = {Index} />
      ...some routes
    </Switch>
</BrowserRouter>

// v6版本
<BrowserRouter>
    <Routes>
    	<Route path="/index" element = {<Index />} />
      ...some routes
    </Routes>
</BrowserRouter>

3. 新增<Outlet />组件以及嵌套路由新写法

<Outlet />组件是一个视图窗口，单单这么讲比较抽象。他其实就是当你使用嵌套路由的时候，子组件的渲染窗口。用过Vue的人都知道，vue的router是有嵌套路由的，但是react在v6之前都没有一个比较简单方便的路由，他的嵌套路由实现是用组件套路由方式实现。现在有了嵌套路由后就方便很多，跟vue的路由一样，使用起来得心应手，也比较符合逻辑。<Outlet />就提供了在父页面的路由的一个子页面渲染窗口，也就是说，当路由找到子页面后，会通过<Outlet />渲染到页面上。

// v6 之前
<BrowserRouter>
    <Switch>
    	// Layout中写子路由
      <Route path='/' component = {Layout} />
    </Switch>
    // 或者这样写
    <Switch>
      <Layout>
        <Switch>
           ...子路由
        </Switch>
	  </Layout>	
    </Switch>
  </BrowserRouter>

// v6
 <BrowserRouter>
    <Routes>
      <Route path='/' element={<Layout><Outlet /></Layout>} >
        <Route path='index' element={<Home />} />
        <Route path='manager'>
            <Route path='userManager' element={<UserManager />} />
        </Route> 
      </Route>
    </Routes>
  </BrowserRouter>
  
// 你也可以将route抽离
interface IRouteProps extends RouteProps{
  children?: IRouteProps[]
}

const route:IRouteProps[] = [
  {path: 'index', element: <Home />},
  {
    path: 'examples', element: <Outlet />,
    children: [
      {path: 'i18n', element: <I18n />},
      {path: 'request', element: <Request />},
      {path: 'dataflow', element: <DataFlow />},
      {
        path: 'admin', element: <Outlet />,
        children: [
          {path: 'manager', element: <Manager />}
        ]
      },
    ]},
];

const routerRender = (routes:IRouteProps[]) => {
  return routes?.map((item, index) => {
    return <Route
      key={index}
      path={item.path}
      element={item.element}>
      {item.children ? routerRender(item.children) : null}
    </Route>;
  });
};

4. 路由跳转 useNavigate()

在v6版本中，已经将useHistory()取消，在跳转时可以使用 useNavigate()进行跳转。当replace为true时，执行的是重定向操作。

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
 navigate('url', {replace: true});

以上四个变动，足以让你在开发时搞定路由这块。如还有问题，欢迎留言。