Руководство по интерпретации и миграции новых функций React-Router v6

JavaScript React.js
Руководство по интерпретации и миграции новых функций React-Router v6

предисловие

В начале 18 летReact RouterReach RouterЛегкая альтернатива.

Оказалось друг против друга, но я не думалReact RouterВозьмите его прямо и слейте (он так хорошо пахнет!)

В настоящее времяv6Это последняя версия теста, и предполагается, что новые функции будут следующими.

  1. <Switch>переименован в<Routes>.
  2. <Route>новые изменения функций.
  3. Вложенные маршруты стали проще.
  4. использоватьuseNavigateзаменятьuseHistory.
  5. новый крючокuseRoutesзаменятьreact-router-config.
  6. Уменьшение размера: от20kbприбыть8kb

1. <Switch>переименован в<Routes>

Компонент верхнего уровня будет переименован. Тем не менее, большая часть его функциональности остается прежней (эй, возня).

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

2. <Route>Новые изменения функций для

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} />} />

3. Вложенная маршрутизация стала проще

Конкретные изменения заключаются в следующем:

  • <Route children>Изменено, чтобы принимать дочерние маршруты.
  • Сравнивать<Route exact>а также<Route strict>Простые правила сопоставления.
  • <Route path>Путь иерархии более понятна.

3.1 Упрощение определений вложенных маршрутов

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 { path, url } = useRouteMatch();

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

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

пока вv6, вы можете удалить логику сопоставления строк. не нужно никакихuseRouteMatch()!

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

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>
  );
}

Конечно, есть и более кислые операции, которые определяются непосредственно в роутинге.<Route>из<Route>, затем используйте следующий новыйAPI:Outlet

3.2 НовыйAPI:Outlet

Эта вещь выглядит так хорошо{this.props.children}, см. следующие примеры конкретного использования:

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>
        {/*
       将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}

Более 3,3<Routes />

Раньше мы могли толькоReact Appиспользовать один изRoutes. Но теперь мы можемReact AppИспользуя несколько маршрутов в , это поможет нам управлять логикой нескольких приложений на основе разных маршрутов.

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

function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}

4. ИспользуйтеuseNavigateзаменятьuseHistory

Зрение сменилось слепотой. . .

всегда чувствоватьReact RouterКоманда немного игривая. . .

// 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()будет заменен наnavigation():

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

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

historyиспользование также будет заменено на:

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

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

5. Новые крючкиuseRoutesзаменятьreact-router-config.

Чувство принуждения сноваhooks, но все еще немного проще, чем раньше. . .

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}

6. Уменьшение размера: от20kbприбыть8kb

React Router v6Принося нам удобство, он также уменьшает объем сумки более чем наполовину. . .

Я чувствую, что могу посмотреть исходный код. . .

7. Миграция и другие важные исправления...

Официальное руководство по миграции находится здесь:Руководство по миграции React Router v6

По сути, перечисленные выше новые функции — это практически все содержимое миграции.

Основной способ начать — обновить пакет:

$ npm install react-router@6 react-router-dom@6
# or, for a React Native app
$ npm install react-router@6 react-router-native@6

Одна из вещей, которая, как мне кажется, требует особого внимания, это:React Router v6 использует упрощенную сетку путей и поддерживает только 2 типа заполнителей: динамические:idпараметры стиля и*подстановочный знак

Ниже приведены все допустимые пути маршрутизации в v6:

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

использоватьRegExpОбычные совпадающие пути будут недействительны:

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

v6Все совпадения пути будут игнорировать завершающий "в URL"/". Фактически,<Route strict>был удален и не действует в v6. Это не означает, что вам не нужно использовать косую черту.

существуетv5Путь до версии, есть неоднозначность маршрутизации

  1. Текущий путь: "/users",но<Link to="me">будет прыгать<a href="/me">.
  2. Текущий путь: "/users/",но<Link to="me">будет прыгать<a href="/users/me">.

React Router v6Исправил эту двусмысленность, удалив хвост"/":

  1. Текущий путь: "/users",но<Link to="me">будет прыгать<a href="/users/me">.
  2. Текущий путь: "/users",но<Link to="../me">будет прыгать<a href="/me">.

Его форма больше похожа на командную строкуcdПрименение:

// 当前路径为 /app/dashboard 

<Link to="stats">               // <a href="/app/dashboard/stats">
<Link to="../stats">            // <a href="/app/stats">
<Link to="../../stats">         // <a href="/stats">
<Link to="../../../stats">      // <a href="/stats">

// 命令行当前路径为 /app/dashboard
cd stats                        // pwd is /app/dashboard/stats
cd ../stats                     // pwd is /app/stats
cd ../../stats                  // pwd is /stats
cd ../../../stats               // pwd is /stats

Эпилог

Справочная статья:

  1. [A Sneak Peek at React Router v6

](alligator.IO/реагировать/реагировать…)

  1. Что нового в React Router v6
  2. React Router v6 in Three Minutes
  3. Migrating React Router v5 to v6

❤️ После прочтения трех вещей

Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне три небольших одолжения:

  1. Ставьте лайк, чтобы больше людей увидело этот контент
  2. Обратите внимание на «Учителей фронтенд-убеждения» и время от времени делитесь оригинальными знаниями.
  3. Также смотрите другие статьи

Персональный WeChat учителя-убеждающего:huab119

Вы также можете прийти ко мнеGitHubПолучите исходные файлы всех статей в блоге:

Руководство по убеждению:GitHub.com/Roger-Hi RO/…Давай поиграем. ~

Категории