React Router v6中的更新

标题react-router v6 中的更新

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
1

1.Switch 重命名为 Routes

​ Routes 是以前Switch组件的升级版，它包括相对路由和链接、自动路由排名、嵌套路由和布局等功能

2.Route新特性

​ 负责渲染React组件的UI，其中的path属性，始终与当前url匹配，第二个需要的属性叫做 element，当遇到当前url是，会告诉Route组件要渲染哪个React组件，这里的element是v6新增的，替换v5中的component的属性

import Children from './Children';
// v5

 (
    
  )}
/>
// v6
} />
1
2
3
4
5
6
7
8
9
10
11

3.路由嵌套更简单，新增API：Outlet

​ 这个很重要，当路由被嵌套时，一般认为网页的某一部分保持不变，只有网页的子部分发生变化

​ v5 中，必须明确定义嵌套路由，v6中并非如此，他从React Router库中挑选了一个名为 Outlet 的最佳元素，为特定路由呈现任何匹配的子元素

function App() {
  return (
    
      
        } />
        }>
          } />
          } />
        
      
    
  );
}

function New() {
  return (
    

      
        {/*
       将直接根据上面定义的不同路由参数，渲染或
        */}
      
    
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.useNavigate

​ useNavigate代替useHistory，useNavigae中不在保存useHistory中的路由信息，获取路由信息通过useLocation

// v5
history.push('/new')
history.replace('/new')
history.go(-1)

// v6
navigate('/new')
navigate('/new', {replace: true})
navigate(-1)
1
2
3
4
5
6
7
8
9

5.useRoutes

function App() {
  let element = useRoutes([
    { path: '/', element:  },
    { path: 'dashboard', element:  },
    { path: 'invoices',
      element: ,
      children: [
        { path: ':id', element:  },
        { path: 'new', element:  }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element:  }
  ]);
  return element;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6.v6中所有路径匹配都忽略URL尾部的’/'，Route 中的strict 在v6中已被删除

// v5 之前存在的路由歧义
1.当前路径'/users'，则<Link to='me'>将跳转<a href='/me'>
2.当前路径'/users/'，则<Link to='me'>将跳转<a href='/users/me'>

// v6修复了这种歧义
1.当前路径'/users'，则<Link to='me'>将跳转<a href='/users/me'>
2.当前路径'/users'，则<Link to='../me'>将跳转<a href='/me'>

// 像命令行中cd的用法
当前路径为 /app/dashboard
<Link to='stats'>			// 
<Link to='../stats'>		// 
<Link to='../stats'>		// 
<Link to='../../../stats'>		// 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7.保留了v5中的useParams和useLocation

8.v6中没有withRouter，但是在类组件中很多情况下会用到

const withRouter = Component => {
  const ComponentWithRouterProp = props => {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      {location, navigate, params}}
      />
    );
  };

  return ComponentWithRouterProp;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

9.大小，从20.5KB减少到7.4KB