react-router-dom v5到v6改变了哪些属性

前言

18 年初，React Router的主要开发人员创建一个名为Reach Router的轻量级替代方案。

原来是相互抗衡的，却没想React Router直接拿来合并（真香！）

目前 v6已是测试最后一版，估计新的特性不出意外就是下面这些了：

1. <Switch>重命名为<Routes>。

2. <Route>的新特性变更。

3. 嵌套路由变得更简单。

4. 用useNavigate代替useHistory。

5. 新钩子useRoutes代替react-router-config。

6. 大小减少：从20kb到8kb

1. <Switch>重命名为<Routes>

该顶级组件将被重命名。但是，其功能大部分保持不变（嗨，瞎折腾）。

1. // v5

2. <Switch>

3. <Route exact path="/"><Home /></Route>

4. <Route path="/profile"><Profile /></Route>

5. </Switch>

8. // v6

9. <Routes>

10. <Route path="/" element={<Home />} />

11. <Route path="profile/*" element={<Profile />} />

12. </Routes>

2. <Route>的新特性变更

component/render被element替代

总而言之，简而言之。就是变得更好用了。

1. import Profile from './Profile';

4. // v5

5. <Route path=":userId" component={Profile} />

6. <Route

7. path=":userId"

8. render={routeProps => (

9. <Profile routeProps={routeProps} animate={true} />

10. )}

11. />

14. // v6

15. <Route path=":userId" element={<Profile />} />

16. <Route path=":userId" element={<Profile animate={true} />} />

3. 嵌套路由变得更简单

具体变化有以下：

• <Route children> 已更改为接受子路由。

• 比<Route exact>和<Route strict>更简单的匹配规则。

• <Route path> 路径层次更清晰。

3.1 简化嵌套路由定义

v5中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑（活久见啊，终于意识到这个问题了。）

且看之前的处理：

1. // v5

2. import {

3. BrowserRouter,

4. Switch,

5. Route,

6. Link,

7. useRouteMatch

8. } from 'react-router-dom';

11. function App() {

12. return (

13. <BrowserRouter>

14. <Switch>

15. <Route exact path="/" component={Home} />

16. <Route path="/profile" component={Profile} />

17. </Switch>

18. </BrowserRouter>

19. );

20. }

23. function Profile() {

24. let { path, url } = useRouteMatch();

27. return (

28. <div>

29. <nav>

30. <Link to={`${url}/me`}>My Profile</Link>

31. </nav>

34. <Switch>

35. <Route path={`${path}/me`}>

36. <MyProfile />

37. </Route>

38. <Route path={`${path}/:id`}>

39. <OthersProfile />

40. </Route>

41. </Switch>

42. </div>

43. );

44. }

而在v6中，你可以删除字符串匹配逻辑。不需要任何useRouteMatch()！

1. // v6

2. import {

3. BrowserRouter,

4. Routes,

5. Route,

6. Link,

7. Outlet

8. } from 'react-router-dom';

11. function App() {

12. return (

13. <BrowserRouter>

14. <Routes>

15. <Route path="/" element={<Home />} />

16. <Route path="profile/*" element={<Profile/>} />

17. </Routes>

18. </BrowserRouter>

19. );

20. }

23. function Profile() {

24. return (

25. <div>

26. <nav>

27. <Link to="me">My Profile</Link>

28. </nav>

31. <Routes>

32. <Route path="me" element={<MyProfile />} />

33. <Route path=":id" element={<OthersProfile />} />

34. </Routes>

35. </div>

36. );

37. }

当然，还有更酸爽的操作，直接在路由里定义<Route>的<Route>，然后用接下来的一个新API：Outlet

3.2 新API:Outlet

这玩意儿，像极了{this.props.children}，具体用法看以下例子：

1. function App() {

2. return (

3. <BrowserRouter>

4. <Routes>

5. <Route path="/" element={<Home />} />

6. <Route path="profile" element={<Profile />}>

7. <Route path=":id" element={<MyProfile />} />

8. <Route path="me" element={<OthersProfile />} />

9. </Route>

10. </Routes>

11. </BrowserRouter>

12. );

13. }

16. function Profile() {

17. return (

18. <div>

19. <nav>

20. <Link to="me">My Profile</Link>

21. </nav>

22. {/*

23. 将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />

24. */}

25. <Outlet />

26. </div>

27. )

28. }

3.3 多个<Routes />

以前，我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

1. import React from 'react';

2. import { Routes, Route } from 'react-router-dom';

5. function Dashboard() {

6. return (

7. <div>

8. <p>Look, more routes!</p>

9. <Routes>

10. <Route path="/" element={<DashboardGraphs />} />

11. <Route path="invoices" element={<InvoiceList />} />

12. </Routes>

13. </div>

14. );

15. }

18. function App() {

19. return (

20. <Routes>

21. <Route path="/" element={<Home />} />

22. <Route path="dashboard/*" element={<Dashboard />} />

23. </Routes>

24. );

25. }

4. 用useNavigate代替useHistory

从一目了然改到双目失明。。。

总感觉React Router团队有点儿戏。。。

1. // v5

2. import { useHistory } from 'react-router-dom';

5. function MyButton() {

6. let history = useHistory();

7. function handleClick() {

8. history.push('/home');

9. };

10. return <button onClick={handleClick}>Submit</button>;

11. };

现在，history.push()将替换为navigation()：

1. // v6

2. import { useNavigate } from 'react-router-dom';

5. function MyButton() {

6. let navigate = useNavigate();

7. function handleClick() {

8. navigate('/home');

9. };

10. return <button onClick={handleClick}>Submit</button>;

11. };

history的用法也将被替换成：

1. // v5

2. history.push('/home');

3. history.replace('/home');

6. // v6

7. navigate('/home');

8. navigate('/home', {replace: true});

强行达成共识

5. 新钩子useRoutes代替react-router-config。

感觉又是一波强行hooks，但还是相对于之前简洁了一些。。。

1. function App() {

2. let element = useRoutes([

3. { path: '/', element: <Home /> },

4. { path: 'dashboard', element: <Dashboard /> },

5. { path: 'invoices',

6. element: <Invoices />,

7. children: [

8. { path: ':id', element: <Invoice /> },

9. { path: 'sent', element: <SentInvoices /> }

10. ]

11. },

12. // 重定向

13. { path: 'home', redirectTo: '/' },

14. // 404找不到

15. { path: '*', element: <NotFound /> }

16. ]);

17. return element;

18. }