Блог

очень новый для react router. я знаю, что этот код написан не самым чистым, но почему, когда я нажимаю кнопку (Link to=’/ question’), он отображает и, НО также отображает кнопку по-прежнему. я попытался настроить его на новый маршрут, но, к сожалению, все еще не работает. также так вы бы структурировали базовый маршрутизатор, который должен отображать два отдельных компонента? я вижу, что могу выполнить render={} или component={}, но не совсем уверен, как отображать более одного компонента с помощью одного маршрутизатора — с учетом этих двух вопросов я просто хочу, чтобы эта кнопка отображала новую страницу (‘/ question’), на которой есть два компонента— AFIB и QFIB и ничего больше (прямо сейчас его рендеринг кнопки и двух новых компонентов в дополнение… вот код:

     <div class='qAndAContainer'>
      <Router>
      <Link to='/question'><button className="px-4 nextQuestion startButton py-2 bg-pink-600 text-white text-sm uppercase font-medium rounded hover:bg-pink-500 focus:outline-none" >Begin
      </button>
      </Link>
    <Route path='/question' component={(props) => (
       <QFIB {...props} />
     )} />
    <Route path='/question' component={(props) => (
       <AFIB {...props} />
     )} />
    </Router>

    </div>
  )
}

export default StartTest
  

Route Компонент маршрутизатора React — это, по сути, прославленное совпадение строк с URL-адресом вашего браузера.

В этом случае вы представляете маршрутизатору React три Routes с одинаковыми строками для сопоставления, поэтому они показывают их все!

Это действительно полезно, например, для отображения той же панели навигации для /dashboard И /dashboard/messages .

Но в вашем случае вам просто нужен один или другой маршрут. Итак, чтобы React Router понял, что вам нужен только один из многих, вам нужно обернуть свои маршруты Switch компонентом. Маршрутизатор React будет отображать только первое найденное совпадение сверху вниз. Попробуйте упорядочить свои маршруты в переключении с наиболее специфичных (самых длинных путей) на наименьшие, чтобы получить наилучшие результаты.

Я действительно не забочусь о render children реквизитах or Route (хотя у них есть свои цели), я обычно предпочитаю составлять так же, как обычные компоненты.

 <Router>
  <Switch>
    // this will actually match /question123/asdf/kdkd?foo=bar as well...
    <Route path="/question">
      <QFIB />
      <AFIB />
    </Route>
    // `exact` tells the Route is must be... exact
    <Route path="/" exact>
       <Link to="/question">Go to Questions</Link>
    </Route>
  </Switch>
</Router>