ReactRouterv6抢先看

在撰写本文时，React Router v6 仍处于 alpha 阶段，但现在正是开始使用它并探索未来发展的好时机。本指南将让您了解新功能/更改！

如您所知，主要维护者在 2018 年初分叉了 React Router 项目，以创建一个名为 Reach Router 的轻量级替代方案。

在此期间，这两个库都在增长，但是 Reach Router 的积极开发似乎将停止，并将合并到即将推出的 React Router v6 🛣

随着即将发布，这里先睹为快！

跳到…

正在变得
大的变化与
嵌套路由更简单
useNavigate 而不是 useHistory
从 20kb 到 8kb

正在变得

这个顶级组件将被重命名。但是，它的功能大部分保持不变。

// v5
import {
  BrowserRouter,
  Switch,
  Route
} from 'react-router-dom';

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

就放下在那里：

// v6
import {
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom';

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

大变化

在 v6 中组件正在接受最大的检修。幸运的是，这些新变化实际上会使其更易于使用！

component/render 属性将替换 element 属性：

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

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

如果您注意到，在 v6 中，现在传递道具要容易得多。这否定了 v5 中 render 属性的使用。

嵌套路由更简单

v5 中的嵌套路由必须非常明确地定义。这需要在这些组件中包含大量字符串匹配逻辑。看：

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

function Profile() {

  let match = useRouteMatch();

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

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

在 v6 中，您可以删除字符串匹配逻辑。也不需要useRouteMatch()！结果非常小：

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

// Approach #1
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

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

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

// Approach #2
// You can also define all
// <Route> in a single place
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

      <Outlet />
    </div>
  )
}

注意：组件的使用方式如下{this.props.children}在反应路由器 v6 中。这是 Reach Router 的一个非常受欢迎的功能！

useNavigate 而不是 useHistory

有时您需要以编程方式导航。例如，在用户提交表单后，他们需要被重定向到确认页面。这是 v5 中的 useHistory 库，在 v6 中已重命名为 useNavigate：

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

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

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

在某些情况下，您需要替换浏览器历史记录中的 URL，而不是推送新 URL。这在 v6 中略有改变：

// v5
history.push('/home');
history.replace('/home');

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

从 20kb 到 8kb

通过所有这些更改，您会期望捆绑包的大小会增加，但实际上它减少了一半！ v5 的压缩包约为 20kb，而 v6 仅约为 8kb。

捆绑包大小是使用 BundlePhobia 工具计算的。

结论

我对 React Router v6 的发布感到非常兴奋。希望这篇文章能让您了解它发布时会发生什么（应该很快）！您可以在最新版本说明中阅读更多关于 React Router v6 的信息📝

有关新功能的完整列表，请参阅官方 React Router v6 迁移指南 🚏