Как мне сделать вложенные роутеры?

Question

Я хочу сделать вложенный маршрут в моем приложении реакции. Например, я нахожусь в бэк-офисе / каталоге каталога, и я хочу отредактировать один продукт и быть перенаправленным внутри компонента каталога в бэк-офис / каталог / editProduct.

Так что это будет относительный маршрут от маршрута/ catalog / что угодно, и родительский компонент моего компонента EditProduct будет компонентом Catalog.

Вот общий компонент моего приложения:

import React from "react";
import { Route, Switch } from "react-router-dom";
import { Home } from "./components/Static/Home.js";
import { Dashboard } from "./components/Backoffice/Dashboard.js";
import { Catalog } from "./components/Backoffice/catalog/Catalog.js";
import { Login } from "./components/Login/Login.js";
import { Signup } from "./components/Signup/Signup.js";
import { PrivateRoute } from "./components/PrivateRoute.js";
import "./scss/App.scss";
import {Header} from "./components/Structure/Header";
import {BOHeader} from "./components/Structure/Backoffice/Header";
import {List} from "./components/Listing/List";

function App()
{
  return (
    <div className="App">
      <div className="App-content">
          <Switch>
              <Route path='/backoffice' component={BOHeader} />
              <Route path='/' component={Header} />
          </Switch>
          <Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/login' component={Login} />
              <Route exact path='/signup' component={Signup} />
              <Route path='/listing' component={List}/>
              <PrivateRoute exact path='/backoffice' component={Dashboard}/>
              <PrivateRoute exact path='/backoffice/catalog' component={Catalog}/>
          </Switch>
      </div>
    </div>
  );
}

export default App;

И я хотел бы сделать что-то подобное в моем компоненте Каталога, например, чтобы иметь возможность получить доступ к изданию продукта в моем каталоге с помощью URL-адреса backoffice / catalog / editProduct:

import React from 'react';
import {List} from './List';
import {Edition} from './Edition';
import { Route, Switch } from "react-router-dom";

export class Catalog extends React.Component
{
    render() {
        return (
            <div>
                <h1>Catalog Managment</h1>
                <Switch>
                    <Route exact path='/listProducts' component={List} />
                    <Route exact path='/editProduct' component={Edition} />
                </Switch>
            </div>
        );
    }
}

У вас есть идеи?

Спасибо вам и вашему мозгу! :)

Answer 1

Это последний хук, добавленный в этот выпуск, useRouteMatch дает вам доступ к свойству match без рендеринга компонента <Route>. Он совпадает с URL-адресом точно так же, как и Route, и принимает точные, строгие, пути и конфиденциальные параметры, как <Route>. До V5.1 способы доступа к объекту сопоставления были следующими:

- Route component as this.props.match
- Route render as ({ match }) => ()
- Route children as ({ match }) => ()
- withRouter as this.props.match
- matchPath as the return value

<= V5.0 </strong>

function App() {
    return (
        <div className="App">
            <Router>
                <Route
                    path="'/Movies/:id/'"
                    strict
                    sensitive
                    render={({ match }) => {
                        return match && <Movies match={match} />;
                    }}
                />
            </Router>
        </div>
    );
}

> V5.1

function App() {
    let match = useRouteMatch({
        path: "/Movies/:id/",
        strict: true,
        sensitive: true
    });

    return (
        <div>
            {match && <Movies match={match} />}
        </div>
    );
}

для лучшего понимания пройдите этот раз React Router