Блог

Главная - Вопросы по программированию - Как использовать ссылки навигации маршрутизатора react из отдельного файла компонента?

Как использовать ссылки навигации маршрутизатора react из отдельного файла компонента?

#javascript #reactjs #react-router

#javascript #reactjs #react-router

Вопрос:

У меня есть компонент заголовка, который имеет навигацию в отдельном файле .js.

 <Router>
  <h1>AshoKart</h1>
    <div className="cart">
      <span>Cart (0 items)</span>
      <Link to='/checkout'>Checkout</Link>
    </div>
    <br />
    <nav>
      <Link to='/'>Home</Link>
      <Link to='/about'>About</Link>
    </nav>
 </Router>

У меня есть сведения о маршруте в App.js досье.

 <Router>   
  <Route path="/" exact>      
    <Home />
  </Route> 
  <Route path="/about">      
    <About />
  </Route> 
  <Route path="/checkout">      
    <Checkout />
  </Route> 
</Router>

Когда я нажимаю на ссылки, навигация не выполняется. Но если я добавлю ссылки навигации в app.js файл, он работает нормально. Не могли бы вы рассказать мне, как заставить ссылки навигации работать из отдельного файла?

Спасибо

Комментарии:

1. Избавиться от <Router> в файле компонента. Ваши компоненты уже встроены в один в приложении

Ответ №1:

Удалите <router/> компонент заголовка так же, как приведенный ниже код. Теперь он должен перемещаться.

 <div>
                          <h1>AshoKart</h1>
                        <div className="cart">
                            <span>Cart (0 items)</span>
                                <Link to='/checkout'>Checkout</Link>
                        </div>
                        <br />
                        <nav>
                                <Link to='/'>Home</Link>
                                <Link to='/about'>About</Link>
                        </nav>
    </div>