Reactjs嵌套路由:嵌套的子级不呈现

Question

我正试图制作一个具有嵌套路由的页面，但我似乎无法使嵌套部分正常工作。我制作了这个示例，它模拟了我在页面上尝试路由的方式。

我取得了一些进展，之前我在它的父元素中使用了精确，这让我更加困惑。但是，我无法理解为什么没有渲染此路线。我已经被这个问题困扰了一段时间。

class App extends React.Component {
render() {
return (
<Router>
<p>Main Application</p>
<Link to="/">Root</Link>
<Link to="/Settings">Settings</Link>
<div>
<Switch>
<Route exact path="/">
<Index />
</Route>
<Route path="/Settings">
<div>
<Settings />
</div>
</Route>
</Switch>
</div>
</Router>
);
}
}
function Index() {
return <h1>Index</h1>;
}
function Settings() {
//let match = useRouteMatch();
return (
<div>
<h1>Settings</h1>
<Link to="Settings/Groups">Groups</Link>
<Link to="Settings/Users">Users</Link>
<Link to="Settings/Dashboards">Dashboards</Link>
<Switch>
<Route path={"Settings/Groups"}>
<Groups />
</Route>
<Route path={"Settings/Users"}>
<Users />
</Route>
<Route path={"Settings/Dashboards"}>
<Dashboards />
</Route>
</Switch>
</div>
);
}
function Groups() {
return <h1>Groups</h1>;
}
function Users() {
return <h1>Users</h1>;
}
function Dashboards() {
return <h1>Dashboards</h1>;
}

Answer 1

在嵌套的子组件中，在前缀中添加斜线'/'。

Answer 2

我认为这与您的url有关。我已经重写了您的代码，以便更好地使用useRouterMatch((钩子，因为这可能会有所帮助，它还匹配react router dom嵌套示例。

仔细阅读react router dom文档，因为它们有一个很好的嵌套示例https://reactrouter.com/web/example/nesting

function Settings() {
const { path, url } = useRouteMatch();
return (
<div>
<h1>Settings</h1>
<Link to={`${url}/Groups`}>Groups</Link>
<Link to={`${url}/Users`}>Users</Link>
<Link to={`${url}/Dashboards`}>Dashboards</Link>
<Switch>
<Route path={`${path}/Groups`}>
<Groups />
</Route>
<Route path={`${path}/Users`}>
<Users />
</Route>
<Route path={`${path}/Dashboards`}>
<Dashboards />
</Route>
</Switch>
</div>
);
}