【问题标题】:Router stacking component in SPA websiteSPA网站中的路由器堆叠组件
【发布时间】:2018-01-19 13:04:07
【问题描述】:

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

对不起我的英语

【问题讨论】:

标签: reactjs react-router single-page-application


【解决方案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 是一个布局组件,因此所有其他组件(即HomeAboutTopicsTopic)都包含在其中。

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。

【讨论】:

  • 但是没有它页面是空白的。我只知道使用反应路由器在页面之间导航
  • 不应该。除非您删除了 Route 标签。向我展示您的代码的 sn-p 将使我有更多的洞察力。
  • 谢谢!我有个主意。感谢您的解决方案:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-13
  • 2017-03-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多