React Router返回子组件而不是父组件

Question

我使用react router来实现嵌套路由。

在我的App.js中，路由是这样的:

<Router>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/home" component={Dashboard} />
<Route exact path="/myplan" component={MyPlan} />
<Route path="/myplan/financial-planning/:topicId" component={CollegeExpenses} />
<Route path="/myplan/:topicId" component={FinancialPlanning} />
</Switch>
</Router>

无论你点击后退还是前进按钮，它都可以完美地渲染/home路由(包括侧边栏、页眉和背景颜色)。但是，如果您要点击返回到/myplan(或除/home以外的任何其他链接)，它只会显示我在该文件中编码的内容，而不会显示侧边栏、标题或背景颜色。

我的仪表板。JSX文件是这样的

<div style={{ backgroundColor: '#F5F5F5', height: '100vh' }}>
//top bar
<section className={classes.header}>
<form className={classes.form}>
<TextField
id="outlined-size-small"
label="Search for lesson"
variant="outlined"
size="small"
/>
<IconButton type="submit" className={classes.iconButton} aria-label="search">
<SearchIcon />
</IconButton>
</form>
<div className={classes.user}>
<IconButton >
<Avatar fontSize="small" />
</IconButton>
</div>
</section>
//sidebar
<div style={{ display: 'flex' }}>
<Router>
<section className={classes.sidebar}>
<div className={classes.logo}>
<img src={logo} alt="Imagication" className={classes.logoBtn} />
</div>
<div style={{ display: 'flex' }}>
<nav className={classes.nav}>
<IconButton className={classes.navBtn} component={Link} to="/home" style={{ color: "rgb(255,255,255)" }} >
<Tooltip title="Home" className={classes.toolTip}>
<HomeIcon />
</Tooltip>
</IconButton>
<IconButton className={classes.navBtn} component={Link} to="/myplan" style={{ color: "rgb(255,255,255)" }}>
<Tooltip className={classes.toolTip} title="My Plan" >
<Map />
</Tooltip>
</IconButton>
</nav>
</div>
</section>
<div className={classes.content}>
<Switch >
<Route exact path="/home" component={Home} />
<Route exact path="/myplan" component={MyPlan} />
<Route path="/myplan/financial-planning/:topicId" component={CollegeExpenses} />
<Route path="/myplan/:topicId" component={FinancialPlanning} />
</Switch>
</div>
</Router>
</div>
</div >

我可以点击一个按钮，将我从/home转到/myplan以及/home转到/myplan/financial-planning。

假设我在/myplan/financial-planning/college-expenses上，想要返回到/myplan/financial-planning，它只会显示我在特定文件中编码的内容，而不会显示侧边栏或标题。

为什么会发生这种情况，我该如何解决它?

Answer 1

从你的代码中，我看到了一点关于你计划如何构建路由的困惑，

如果你想让Dashboard和MyPlan在两条不同的路线上，这意味着它们可以在路线/dashboard和/myplan上访问，我认为不可能与MyPlan共享Dashboard的部分(如Header，侧边栏)。

你可以手动做到这一点，通过创建一个侧边栏或标题组件，并做这样的App.js

<Route  path="/home">
<Header/>
<SideBar/>
<Dashboard/>
</Route>
<Route exact path="/myplan" >
<Header/>
<SideBar/>
<MyPlan/>
</Route>

如果你不想手动插入标题或侧边栏，而你想使用Switch代替，就像你已经做过的那样，你需要使用嵌套路由

首先，删除App.js中除Home以外的所有路由

<Router>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/home" component={Dashboard} />
</Router>

在仪表板:

let { path } = useRouteMatch();
return (
<div>
//  ... Implementations of Sidebar and Header, no more <Router> needed
<Switch >
<Route exact path={`${path}/myplan`} component={MyPlan} />
<Route path={`${path}/myplan/financial-planning/:topicId`}  component= 
{CollegeExpenses} />
<Route path={`${path}/myplan/:topicId`} component={FinancialPlanning} />
</Switch>