Question

我想在我的react应用程序中做嵌套路由。例如，我在一个目录后台/目录中，并且我想编辑一个产品并重定向到目录组件内的后台/目录/ editProduct。

因此它将是从/ catalog / anything路线开始的相对路线，而我的EditProduct组件的母组件将是组件Catalog。

这是我的App常规组件：

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使您无需显示<Route>组件即可访问match属性。就像Route一样，它与URL匹配，并且像<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

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

如何做嵌套路由器？

1 个答案: