как реализовать дочернюю маршрутизацию в функциональных компонентах

Question

Я новичок в React. Я столкнулся с проблемой добавления дочерних маршрутов с функциональными компонентами.

Я узнал, что для компонентов класса мы используем как

<Router>
    <Route component={Main}>
        <Route path="/" component={Home}/>
        <Route path="/cars" component={Car}/>
        <Route path="/about" component={About}/>
    </Route>
</Router>`

, а для доступа к компоненту мы используем {this.props.children}.

Может кто-нибудь, пожалуйста, дайте мне знать, как написать синтаксис для дочерних маршрутов в функциональных компонентах. (Я использовал react-router-dom).

Answer 1

Рекомендую вам прочитать Первоначальная документация о реагирующем маршрутизаторе .

Пример функционального компонента может быть следующим:

• Основа c Маршрут

Routes.component. js

import * as React from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

const Routes = props =>
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/dashboard" component={Dashboard} />
    </Switch>
  </Router>

Где Маршрутизатор является BrowserRouter, который использует HTML5 API истории для синхронизации c вашего пользовательского интерфейса с URL , Switch отображает первого дочернего элемента <Route>, который соответствует местоположению по URL и Route должен отображать некоторый интерфейс, когда его путь соответствует текущему URL .

• Вложенный маршрут

Dashboard.component. js

import * as React from "react";
import {Route, Link} from "react-router-dom";

const Dashboard = ({ match }) =>
  <div>
    <h2>Dashboard</h2>

    <div>
      <ul>
        <li>
          <Link to={`${match.url}/projects`}>Projects</Link>
        </li>
      </ul>

      <hr />

      <Route path={`${match.path}/projects`} component={Projects} />
    </div>
  </div>

Внутри компонента, в который вы хотите вложить другой маршрут, введя его в Компонент маршрута , вы получаете объект сопоставления в props.

При этом вы можете использовать его свойства:

• match.url: это часть URL-адреса, полученная от родителя, и построить еще один <Link> хи ld

• match.path: это путь, используемый для связи и построения другого <Route> child

Я расскажу вам больше о это в этом примере я сделал . Вы должны нажать на Dashboard

Это все в документации React Router:)