react-router V6

react-router v6

最近公司的项目用到了这个，无奈网上资源好少，一些还是要钱才能看的，所以写下来供大家分享，因为也是新学的，有不对的地方欢迎评论。
1 useNavigate
2 Route的component变成element
3新增路由useRoutes
4 Navigate代替Redirect
5 switch 变成 Routes
。。。。

useNavigate

第六版的useHistory将被useNavigate取代，而且不能从Navigate拿到一些url的地址了，可以打印一下看一下


有印象的小伙伴以前的history打印出来是一个对象，不过不慌，可以通过另一个API useLocation拿到

Routes

就是以前的Switch，只不过改了个名字。

Route

这个的最大改变，就是将component,render变成element,

这是v5的用法，
看看V6的

直接写一个组件进去，这样我们可以直接通过赋值给组件传递数据，而不用像v5那样得通过children来编写函数传递进去。

useRoutes

这个能让react写路由就跟vue-router一样方便。
且看用法：

注意。这里的element不用大括号包裹，

这里的path,不用加上/，即使嵌套，也不用写上父路由的途径，比我之前用的要好很多。我之前是封装一个函数，在之前的文章有写。
这里的组件用了懒加载
使用的话直接将routes包裹在一个div即可。
然后只需要在有多层路由的地方，引入一个新东西，就是OUTLET
这东西把他当作props.children就好。然后也不用做另外的设计了，很方便。比之前那种方法方便
https://blog.csdn.net/lin_fightin/article/details/113605309（以前写的博客）

之前的方法做一个对比

自己写一个数组对象，然后封装一个函数，

import React from "react";
import {
    
     Switch, Route, Redirect } from "react-router-dom";
const RenderRoutes = (props) => {
    
    
  const {
    
     routes, redirect } = props;
  return (
    <Switch>
      {
    
    redirect && (
        <Route
          exact
          path={
    
    redirect.to}
          component={
    
    () => {
    
    
            return <Redirect to={
    
    redirect.jump} />;
          }}
        />
      )}
      {
    
    routes &&
        routes.map((route) => {
    
    
          return (
            <Route
              path={
    
    route.path}
              key={
    
    route.key}
              exact={
    
    !!route.exact}
              children={
    
    (props) => {
    
    
                return <route.component route={
    
    route} {
    
    ...props} />;
              }}
            />
          );
        })}
    </Switch>
  );
};



使用的时候


`import React from 'react'
import {
    
    BrowserRouter} from 'react-router-dom'
import RenderRoutes from './routerRender'
import routes from './routes'
function BaseRouter(){
    
    
    return <BrowserRouter>
        <React.Suspense fallback={
    
    <div>loading....</div>}>
        <RenderRoutes redirect={
    
    {
    
    to:'/',jump:'/discover'}} routes={
    
    routes}></RenderRoutes>
        </React.Suspense>
    </BrowserRouter>
}
export default BaseRouter`
export default RenderRoutes;

这样处理虽然可以达到像上面的效果，但比较麻烦，尤其在路由嵌套的父组件那里要做处理
如图

还要把自己封装的函数引进来再做一层处理，使用了新的API useRoutes就不用了。

Navigator

重定向，Redirect好像被移除了，现在用这个来重定向，跟Redirect用法有点出入
以前的用法：
现在：一般配合useRoutes，如图

当我们输入localhost:3000后，后面如果不加参数，就会跳到discover/recommend去，
注意这个不能把Navigate写到
这样会报错。