标签：element React v6 path 组件 router 路由

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});

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

标签：element,React,v6,path,组件,router,路由
来源： https://blog.csdn.net/muou_hang/article/details/121419002

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。