在 React 中，相同的内容显示在另一个页面上

Posted 2023-02-22

【中文标题】在 React 中，相同的内容显示在另一个页面上

【英文标题】：In React , same content is showing on another page

【发布时间】：2020-10-09 01:32:14

【问题描述】：

在 Home.js 中，

render()
Return <BrowserRouter>
<AppBar>
<ToolBar>
<Button component=Link to="/profile">Profile</Button>
</ToolBar></AppBar>
<Switch>
<Route path="/profile" render=props=><Profile ...props user=user/>></Route>
</Switch>
<div>hello!!!!</div>
</BrowserRouter>

我的问题是这个你好！内容也显示在个人资料页面上。

那么如何解决呢？

【问题讨论】：

路由器渲染所有子节点。将 hello div 放在路由器外部或放在具有特定路径的Route 上。如果您想进一步了解匹配和渲染的内容，请在 Router 中使用 Switch。 react-router-dom docs 也很有帮助。

我也尝试过使用 Switch 标签，但没有按预期工作。

【参考方案1】：

该组件的内容将包含子项中的所有内容，因此在条件下，Route 的渲染方法中的所有内容都假设它与路径匹配。

使用开关确保只匹配一个路由。

<Router>
<div>Static header on all pages/routes</div>
<Switch>          
    <Route path="/profile" render=props=><Profile ...props user=user/>></Route>
    <Route path="/anotherpage" render=props=><div>hello!!!!</div>></Route>
</Switch>
<div>Static footer on all pages/routes</div>
</Router>

【参考方案2】：

添加了return hello!!!/>

现在可以了。