Question

我正在定义反应中的路线

app-routes.js文件中的全局变量以及其他组件中的全局变量。

app.js

render() {
return (
  <div className="App-wrap">
    <AppRoutes/>
  </div>
); }

app-route.js

export class AppRoutes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/" component={LayoutComponent} />
        </Switch>
      </Router>
    );
  }
}

layout-component.js

我已将标题放置在此处

    export class LayoutComponent extends React.Component {
  render() {
    return (
      <LayoutWrap>
        <HeaderComponent> </HeaderComponent>
        <LayoutRoutes />
      </LayoutWrap>
    );
  }
}

layout.routing.js

    export class LayoutRoutes extends React.Component {
  render() {
    return (
        <Switch>
          <Route  path="/" exact >
          <Redirect to="/users"/>
          </Route>
          <Route  path="/users"  name="Users" component={UserComponent} />
          <Route  path="/permissions"  name="Permissions"  component={PermissionComponent} />
        </Switch>
    );
  }
}

现在的问题是，当我定义子路线时，我的子路线依赖于父路线即我必须在孩子中写父母以前的网址。如果我将app-routes.js路径从“”更改为布局，则我的路由将无法工作。

<Route path="/layout" component={LayoutComponent} />

如何解决该问题？

Answer 1

在定义子路由时，需要在父路由路径之前添加前缀才能使它们生效。为此，您可以利用道具中的match.path

export class LayoutRoutes extends React.Component {
  render() {
    const { match } = this.props;
    return (
        <Switch>
          <Route  path={match.path} exact render ={(props) => <Redirect to="/users"/>} />
          <Route  path=`${match.path}/users`  name="Users" component={UserComponent} />
          <Route  path=`${match.path}/permissions` name="Permissions"  component={PermissionComponent} />
        </Switch>
    );
  }
}

反应路由-路由独立于父路由文件

1 个答案: