2. Базовое использование React-Router

React.js
2. Базовое использование React-Router

Серия "Раскрытие исходного кода React-router-dom"

1. Context — инструмент React для доступа к данным между компонентами.
3. Демистификация исходного кода react-router-dom — BrowserRouter

Сегодня я представляю вам еще одну статью о переводе. Оригинал изофициальный сайт react-router-dom

Эта статья нашаРаскрыт исходный код React-router-domВторая статья цикла. То же самое предзнание.

Если вы хотите прочитать первую статью, пожалуйста, перейдите сюда.Контекст - Реагический инструмент для доступа к данным по компонентам

основные компоненты

В React Router есть три типа компонентов:

  • routerКомпоненты (BrowserRouter, HashRouter)
  • route matchingКомпоненты (маршрут, коммутатор)
  • navigationКомпоненты (ссылка)

использоватьreact-router-domПрежде нам нужно установить этот пакет в путь к проекту.

npm install react-router-dom

После завершения установки компоненты перечислены выше, мы можем пройтиreact-router-domполучать.

import { BrowserRouter, Route, Link } from "react-router-dom";

Routers

Для веб-приложений на основе React Router корневым компонентом должен быть компонент маршрутизатора (BrowserRouter, HashRouter). в проекте,react-router-domПредусмотрено и два маршрута. Оба маршрута создают объект истории. Если в нашем приложении есть сервер, отвечающий на веб-запросы, мы обычно используем компонент ; если используется статический файловый сервер, мы должны использовать компонент 

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);

сопоставление маршрутов

В react-router-dom есть два компонента, которые соответствуют маршрутам: и .

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

Сопоставление маршрута выполняется путем сравнения атрибута пути компонента с путем к текущему местоположению. Когда соответствует, соответствующее содержимое компонента будет отображаться. Если он не совпадает, сделать null. Если не имеет атрибута пути, всегда будет отображаться соответствующее содержимое его компонента.

// 当 location = { pathname: '/about' }
<Route path='/about' component={About}/> // 路径匹配成功，渲染 <About/>组件
<Route path='/contact' component={Contact}/> // 路径不匹配，渲染 null
<Route component={Always}/> // 该组件没有path属性，其对应的<Always/>组件会一直渲染

Мы можем размещать компоненты в любом месте дерева компонентов. Но чаще всего пишут несколько вместе. Компонент можно использовать для "связывания" нескольких маршрутов вместе.

Когда несколько компонентов используются вместе, не обязательно использовать компонент , но очень удобно использовать компонент . перебирает все нижележащие подкомпоненты и отображает только первый , соответствующий маршруту.

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* 如果上面的Route的路径都没有匹配上，则 <NoMatch>被渲染，我们可以在此组件中返回404 */}
  <Route component={NoMatch} />
</Switch>

Route Rendering Props

Компонент, отображаемый при совпадении , может быть записан тремя способами:

Для конкретного использования, пожалуйста, обратитесь к документу Здесь мы кратко представляем два метода компонента и рендеринга.

component

При использовании , если контент, который мы хотим отобразить, уже имеет соответствующий компонент, мы можем напрямую использовать метод компонента. Например:

<Route path="/user/:username" component={User} />;

function User({ match }) {
  return <h1>Hello {match.params.username}!</h1>;
}

render

Метод рендеринга использует встроенную функцию непосредственно для рендеринга содержимого.

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

Уведомление:

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

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

Navigation

React Router предоставляет компонент для добавления ссылок в приложения. При отображении на html-странице создается тег .

<Link to="/">Home</Link>
// <a href='/'>Home</a>

Компонент является специальным компонентом . Когда его путь совпадает с текущим местоположением, его стиль можно настроить для представления текущего местоположения страницы.

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>

Когда требуется перенаправление страницы, мы можем использовать компонент . При отображении компонента страница будет отображаться в месте, указанном атрибутом to компонента .

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>
Категории