компонент не отображается при определении маршрута внутри компонента меню

Question

Я пытаюсь создать повторно используемый компонент меню, который будет полностью основан на реагирующий маршрутизатор. Я мог бы показать пункты меню, но при нажатии компонент, который должен быть отображен, не отображается. Но если я определяю маршруты вне компонента меню, как внутри компонента <Router>, это работает. Как я могу заставить это работать в любом случае?

Вот как я это сделал

Menu.js

const Menu = ({ children }) => {
  return (
    <>
      <Header padding>
        <Container>
          <Row>
            <NavTabs>{children}</NavTabs>
          </Row>
        </Container>
      </Header>
    </>
  );
};

export default Menu;

MenuItem.js

const MenuItem = ({ to, children, match }) => {
  return (
    <>
      <NavItem>
        <NavLink to={`${match.path}${to}`}>{children}</NavLink>
      </NavItem>
    </>
  );
};

export default withRouter(MenuItem);

Вот как я это использую

const items = [
  { id: 1, name: "Home", path: "home", component: HomeC },
  { id: 2, name: "Jobs", path: "jobs", component: Jobs }
];

const Home = () => {
  return (
    <>
      Menu
      <Menu>
        {items.map(item => (
          <MenuItem key={item.id} to={item.path}>
            {item.name}
          </MenuItem>
        ))}
        {/* if Route is defined inside Menu component, render component from here only else from outside */}
        <>
          <Switch>
            <Route path="/home" component={HomeC} />
            <Route path="/jobs" component={Jobs} />
          </Switch>
        </>
      </Menu>
    </>
  );
};

export default Home;

Вот полный код с демо

https://codesandbox.io/s/vq0w113140

Answer 1

Вы можете удалить Маршруты из Menu.js

и поместить их в index.js чуть ниже Маршрута домашних компонентов.

Вы можете использовать этот код:

Home.js:

  const Home = () => {
  return (
    <>
      Menu
      <Menu>
        {items.map(item => (
          <MenuItem key={item.id} to={item.path}>
            {item.name}
          </MenuItem>
        ))}
        {/* if Route is defined inside Menu component, render component from here only else from outside */}
        <></>
      </Menu>
    </>
  );
};

index.js: please remove exact in first route

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/jobs" render={() => <h1>jobs component</h1>} />
        <Route path="/home" render={() => <h1>Home component</h1>} />
      </Router>
    </div>
  );
}

Вот рабочая кодовая ссылка: https://codesandbox.io/s/pjx7pv581j

Answer 2

Вы можете использовать Switch из react-router-dom.Switch возвращает только один первый соответствующий маршрут.

function App() {
 return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/jobs" component={Jobs} />
      </Switch>
    </BrowserRouter>
  </div>
 );
}

Вот мое решение: https://codesandbox.io/embed/wn4j5525n8

Answer 3

Проблема в вашем index.js, ваш роутер не соответствует ни одному из маршрутов для /jobs.

  <Router>
    <Route exact path="/" component={Home} />
    <Route path="/hello" render={() => <h1>Hello</h1>} />
    <Route path="/home" render={() => <h1>Hello</h1>} />
  </Router>

Вам нужно добавить здесь маршрут для /jobs, илиесли вы хотите использовать компонент по умолчанию Home, оберните маршруты в Switch и добавьте Route без path= внизу с опцией component={Home}.

---

EDIT - Пример переключения

<Router>
    <Switch>
        <Route path="/hello" render={() => <h1>Hello</h1>} />
        <Route path="/home" render={() => <h1>Hello</h1>} />
        <Route component={Home} />
    <Switch>
</Router>

В этом примере любой маршрут, кроме /hello и /home, будет отображать компонент Home.Переключатель работает так же, как в коде switch - он выберет первый из списка, который соответствует, и отобразит его.Если ни один из них не совпадает, будет отображаться последний элемент в списке.

Это позволит вам визуализировать компонент Jobs с маршрутами заданий внутри компонента Home, чтобы включить меню.