使用导航栏反应路由器答案

【问题标题】：React Router with Navbar使用导航栏反应路由器
【发布时间】：2020-12-31 11:48:10
【问题描述】：

您好，我是 React 新手，我正在尝试在主页上设置路由。链接当前位于我的导航栏组件内，但我相信我必须在 App.js 中设置路由器？我确实有我想用于路由的联系人、社交和爱好组件。谢谢你的帮助:)

//NavBar Component
  < div className='NavBar'>
      <div className='nav-left'>
        <img className='laptop-logo' alt='laptop-logo' src={brentLaptop} />
        <h2 id='nav-header'>BCLabs</h2>
      </div>
      <div className='nav-right'>
        <ul>
          <li>Contact</li>
          <li>Social</li>
          <li>Hobbies</li>
        </ul>
      </div>
    </div>

//App component
<div className="App">
      <NavBar />
</div>

【问题讨论】：

标签： html css reactjs react-router

【解决方案1】：

你应该先从https://www.npmjs.com/package/react-router-dom安装react-router-dom

从 'react-router-dom' 导入 { BrowserRouter as Router };

使用 Router

包装您的应用

步骤：

从'react-router-dom'导入{链接}；
在您的应用中设置路由组件，例如 Route path="/contact" component={Contact}
在你的 li 中放置一个带有 to 属性的链接，例如 Link to="/contact"

您可以在此链接https://reactrouter.com/web/guides/quick-start 中查看 react router dom 中的文档

【讨论】：