React路由-独立于父路由文件的路由

Question

我正在react 中定义路线

app-routes.js文件中的全局路径，以及它们各自组件中的其他路径。

app.js

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

应用程序路由.js

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

布局组件.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>
);
}
}

现在的问题是，当我定义子路由时，我的子路由依赖于父路由即，我必须在child中写入parent的上一个url。如果我将我的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>
);
}
}