Блог

Главная - Вопросы по программированию - Маршрутизация — Reactjs — работает только первый маршрут

Маршрутизация — Reactjs — работает только первый маршрут

#reactjs #typescript #react-router-dom

#reactjs #typescript #реагировать-маршрутизатор-dom

Вопрос:

Я хочу создать повторно используемый компонент маршрута

 import React from 'react';
import { Route } from 'react-router-dom';

interface ITProffesion {
  proffesion: string;
}

export const ITRoleRouter: React.FC<ITProffesion> = ({ proffesion }) => (
  <Route exact path={`/${proffesion}`} key={proffesion}>
    <p>Works {proffesion}</p>
  </Route>
);

но когда я хочу его использовать — работает только первый маршрут — пример (работает только серверная часть — это тест, я
буду загружать данные из api):

 export const App: React.FC<{}> = () => (

      <Router>
        <Switch>
          <Route exact path="/">
            <DemoContainer />
          </Route>
          <ITRoleRouter proffesion="backend" />
          <ITRoleRouter proffesion="frontend" />
        </Switch>
      </Router>
);

Что не так? Могу ли я использовать react router таким образом?
Спасибо, Азия

Ответ №1:

Причина такого поведения заключается в том, что Switch компонент использует path и from реквизиты своих дочерних компонентов, чтобы проверить, есть ли совпадение маршрута, которое определяет, что отображается.

Экземпляры ITRoleRouter компонента не имеют этих реквизитов, но являются дочерними элементами Switch компонента.

Поскольку оба ITRoleRouter экземпляра не имеют этих реквизитов, вместо этого он будет соответствовать первому экземпляру.

Итак, вместо этого вы могли бы сделать что-то вроде этого:

 interface ITProffesion {
  path: string;
  proffesion: string;
}

const ITRoleRouter: React.FC<ITProffesion> = ({ path, proffesion }) => (
  <Route exact path={path} key={proffesion}>
    <p>Works {proffesion}</p>
  </Route>
);

const App: React.FC<{}> = () => (
  <Router>
    <Switch>
      <Route exact path="/">
        <DemoContainer />
      </Route>
      <ITRoleRouter path="/backend" proffesion="backend" />
      <ITRoleRouter path="/frontend" proffesion="frontend" />
    </Switch>
  </Router>
);

Ознакомьтесь с этой проблемой Github для получения дополнительной информации.

Ответ №2:

https://reactrouter.com/core/api/Switch

Все дочерние элементы a <Switch> должны быть <Route> <Redirect> элементами or. Будет отображаться только первый дочерний элемент, соответствующий текущему местоположению.

Коммутатор работает только с первым уровнем компонентов непосредственно под ним.

Песочница

Метки: