React Router V6 的新功能

1. <Routes>替换<Switch>

// This is a React Router v5 app

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

function Users() {
  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <OwnUserProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );
}

// This is a React Router v6 app

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

// 将所有<Route>元素提升到单个路由配置中
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

2. v6 中的有效路由路径：

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

无效：
/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

3. Link to

<Link to="me">
v5中
如果当前 URL 是/users ,则 <a href="/me">
当前 URL 有一个尾部斜杠，比如/users/ 则 <a href="/users/me">
v6 修复了这种歧义
始终为<a href="/users/me">

4. useNavigate代替 useHistory

// This is a React Router v5 app
import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}
// This is a React Router v6 app
// 1.跳转指定页面 
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
//如果您需要替换当前位置而不是将新的一个新的位置替换到历史堆栈中，使用
navigate(to, { replace: true })
//传状态
navigate(to, { state })
// 2. 回跳
const { go, goBack, goForward } = useHistory();
const navigate = useNavigate();
Go 2 pages back/forward： go(-2) / navigate(-2)| go(2) / navigate(2)
Go back: goBack() / navigate(-1)
Go forward: goForward() / navigate(1)

5. Navigate

import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/" element={<Navigate replace to="/home" />} />
    </Routes>
  );
}
// 声明式API
import { Navigate } from "react-router-dom";

function App() {
  return <Navigate to="/home" replace state={state} />;
}

6. <NavLink exact> 重命名为 <NavLink end>
7. 移除了 <NavLink />中 activeClassName 和 activeStyle属性

If you prefer to keep the v5 props, you can create your own <NavLink /> as a wrapper component for a smoother upgrade path.
import * as React from "react";
import { NavLink as BaseNavLink } from "react-router-dom";

const NavLink = React.forwardRef(
  ({ activeClassName, activeStyle, ...props }, ref) => {
    return (
      <BaseNavLink
        ref={ref}
        {...props}
        className={({ isActive }) =>
          [
            props.className,
            isActive ? activeClassName : null
          ]
            .filter(Boolean)
            .join(" ")
        }
        style={({ isActive }) => ({
          ...props.style,
          ...(isActive ? activeStyle : null)
        })}
      />
    );
  }
);