Question

也许我对react-router的理解不存在，或者我的逻辑是错误的，或者我错过了关键部分。

from App.js 

    function App() {
      return (
      <>
        <Router>
          <Switch>
          <Header/>
            <Route path='/' exact component={Home} />
            <Route path='/about' exact component={About}/>
            <Route path='/services' exact component={Services}/>
          </Switch>
        </Router>
        <ContentSection/>
        <Footer/>
      </>
      );
    }

来自Header.js

function Header() {
  return (
   <>
    <header>
      <div className='logo'>logo</div>
      <Nav/>
    </header>
   </>
  );
}
    export default Header;

来自Nav.js

function Nav() {
  return (
   <>
    <ul className='menu'>
      <li className='menu-item'>   
        <Link to='/'>Home</Link>
      </li>
      <li className='menu-item'>   
          <Link to='/about'>About</Link>
      </li>
      <li className='menu-item'>   
          <Link to='/services'>Services</Link>
      </li>
      </ul>
    </>
  );
}

URL更改了，但是应该根据所选的nav选项/链接在何处呈现组件，它什么也不会呈现。我是否需要将所选链接置于状态并将其作为道具传递给组件？如果任何人都有一个很好的教程链接-也请感激。

谢谢。

Answer 1

您的Router是提供者，它应该包装使用Route或Switch或任何react-router组件的每个组件：

function App() {
  return (
  <>
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' exact component={About}/>
        <Route path='/services' exact component={Services}/>
    </Router>
    <Header />
    <ContentSection/>
    <Footer/>
  </>
  );
}

Answer 2

在Switch之外定义标题

      <>
        <Router>
          <Header/>
          <Switch>
            <Route path='/' exact component={Home} />
            <Route path='/about' exact component={About}/>
            <Route path='/services' exact component={Services}/>
          </Switch>
        </Router>
        <ContentSection/>
        <Footer/>
      </>

Switch如何在反应路由器Use of Switch中工作

Q：React-Router-组件渲染-逻辑可能错误

2 个答案: