react router5和react router6的区别

react router官方文档： reactrouter.com/en/main
react router(v5)官网地址：v5.reactrouter.com/

安装v5

npm install react-router-dom\@5

安装v6

npm install react-router-dom\@6

1.是否支持typescript

• react-router v6 原生支持typeScript。

• react-router v5 原生不支持typeScript。
  需要安装react-router-dom来支持ts;

  npm install @types/react-router-dom

2.路由配置

React Router 5，通常使用<Route>和<Switch>来定义路由。 而在React Router 6中，使用<Route>来定义路由。

// React Router v5实例
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        /*使用了 `exact` 属性来确保只有在路径为 `/` 时才会匹配 `Home` 组件*/
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

// React Router v6实例
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </Router>
  );
}

v6使用<Navigate>来实现路由重定向，它与React Router 5中的<Redirect>元件功能类似，将用戶重定向到指定的路由。

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

function App() {
  const routes = [
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> },
    { path: '/contact', element: <Contact /> },
  ];

  return (
    <Router>
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.element} />
        ))}
      </Routes>
    </Router>
  );
}

React Router 6中的路由配置更加简单明了，可以使用JS对象进行声明。

3.重定向路由

元件被重命名為<Navigate>元件

4.动态路由

React Router 6引入了动态路由，可以更灵活地设置路由规则。

5.堆栈式路由

React Router 6引入了堆栈式路由，管理路由堆棧更灵活，实现更灵活的路由控制。

参考来源：

www.cnblogs.com/520BigBear/… reactrouter.com/en/6.11.2/u…