Компонент не загружается, когда я изменяю ссылку во вложенном маршруте в реагирующем маршрутизаторе

Question

У меня есть следующий код внутри ComponentA

        <BrowserRouter> 
          <Switch>
            <Route exact path="/"> <ComponentB /> </Route>
            // More Routes are here
          </Switch>
        </BrowserRouter>

У меня есть следующий код внутри ComponentB

          <NavLink to="/campaigns">CLICK HERE</NavLink> 
          <Switch>
            <Route exact path="/"> <Dashboard /> </Route>
            <Route path="/campaigns"> <Campaigns /> </Route>
          </Switch>

Я хочу, чтобы компонент "Dashboard" отображался внутри ComponentB по умолчанию , И если кто-то нажимает на ссылку «НАЖМИТЕ ЗДЕСЬ», компонент «Панель мониторинга» следует заменить компонентом «Кампании».

Но сейчас происходит то, что, когда кто-то нажимает «НАЖМИТЕ ЗДЕСЬ», URL-адрес в адресной строке меняется на «localhost: 3000 / кампании», как я хочу, но компонент «Кампании» не загружается. Вместо этого появляется пустая страница.

Что я делаю не так?

Пожалуйста, спросите, должен ли я разъяснить свой вопрос. Спасибо!

Answer 1

Вы не должны использовать реактив-маршрутизатор, если вы не хотите менять маршрут. Просто используйте JS. Я бы использовал состояние, чтобы сохранить активную вкладку и просто показать активную.

const [output, setOutput] = useState('dashboard');

return (
  <div>
    <div>
      <button onClick={() => setOutput('dashboard')}>Dashboard</button>
      <button onClick={() => setOutput('campaigns')}>Campaigns</button>
    </div>
    {output === 'dashboard' ? <Dashboard /> : <Campaigns />}
  </div>
);

Answer 2

Попробуйте определить ваши маршруты следующим образом:

<Route path="/campaigns" render={Campaigns} exact />

«Точный» может или не может быть необходимым.