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。

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

1 个答案: