Блог

У меня есть компонент приложения, создать компонент и присоединиться к компоненту. Я хочу отображать ссылки / навигацию для доступа к компоненту Create и Join только в компоненте приложения. В настоящее время, когда я нажимаю на Создать ссылку и присоединиться к ссылке, я все еще вижу эти ссылки.

Это моя текущая настройка. App.js

 function App(props) {
   return (
       <Router>
           <ul>
               <li>
                   <Link to="/create">Create</Link>
               </li>
               <li>
                   <Link to="/join">Join</Link>
               </li>
           </ul>

           <div>
               <Switch>
                   <Route path="/create">
                       <Create />
                   </Route>
                   <Route path="/join">
                       <Join />
                   </Route>
               </Switch>
           </div>
       </Router>
   );
}
 

Вы можете разместить их на определенном, например, на вашем «домашнем» маршруте. Router сопоставляет и отображает маршруты включительно, поэтому вам нужно будет указать exact prop, поскольку префикс пути «/» соответствует всем путям.

 function App(props) {
  return (
    <Router>
      <Route exact path="/"> // <-- only render when path is exactly "/"
        <ul>
          <li>
            <Link to="/create">Create</Link>
          </li>
          <li>
            <Link to="/join">Join</Link>
          </li>
        </ul>
      </Route>

      <div>
        <Switch>
          <Route path="/create">
            <Create />
          </Route>
          <Route path="/join">
            <Join />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 

В качестве альтернативы вы можете поместить их на «общий» маршрут в конце Switch , поэтому, если путь не соответствует чему-либо еще над ним, он будет отображаться. Switch Эксклюзивное сопоставление и рендеринг маршрутов.

 function App(props) {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/create">
            <Create />
          </Route>
          <Route path="/join">
            <Join />
          </Route>
          <Route> // <-- matches only if nothing matched above
            <ul>
              <li>
                <Link to="/create">Create</Link>
              </li>
              <li>
                <Link to="/join">Join</Link>
              </li>
            </ul>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}