SPA网站中的路由器堆叠组件

Question

我学习使用 ReactJS 制作单页应用程序，我遵循本教程 https://reacttraining.com/react-router/web/example/basic。 react router basic 我成功地实施了该教程，但现在我对反应路由器中的组件感到非常困惑。我正在尝试使用登录表单或欢迎页面创建登录页面。我对渲染组件上的导航栏或侧边栏等组件感到困惑，它总是显示在每个组件或页面中。如何让它消失？

对不起我的英语

Answer 1

删除BasicExample组件中的以下代码：

<ul>
  <li><Link to="/">Home</Link></li>
  <li><Link to="/about">About</Link></li>
  <li><Link to="/topics">Topics</Link></li>
</ul>

BasicExample 是一个布局组件，因此所有其他组件（即Home、About、Topics 和Topic）都包含在其中。

BasicExample 之后应该是这样的：

const BasicExample = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

PS：我有点好奇为什么你不想在一个有路线的应用中导航。也许你根本不应该使用 React Router。