Как получить маршруты из другого местоположения/функции в react-маршрутизатор-dom v6?

Question 1

Я пытаюсь отреагировать на маршрутизатор V06, но столкнулся с проблемой, когда я пытался сделать это ниже, но все маршруты и страницы пусты.

Код:

// Main App Function
    const App = () => {
      return (
        <Router>
          <Fragment>
            <Navbar />
            <Routes>
              <Route index strict path="/" element={<Landing />} />
      **{/* Here I want to render paths from other function*/}**
              <Route element={<AppRoutes />} />
            </Routes>
          </Fragment>
        </Router>
      );
    };
    
    export default App;
    
    // In AppRoutes Function
    const AppRoutes = () => (
      <section className="container">
        <Routes>
          <Route strict path="login" element={<Login />} />
          <Route strict path="register" element={<Register />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </section>
    );
    
    export default AppRoutes;

Question 2

В приложении объявите Landing компонент, который будет страницей индекса, и визуализация AppRoutes по пути"/*", чтобы разрешить сопоставление подмаршрутов.

Апп

<Router>
  <Navbar />
  <Routes>
    <Route index element={<Landing />} />
    <Route path="/*" element={<AppRoutes />} />
  </Routes>
</Router>

Приложения

const AppRoutes = () => (
  <section className="container">
    <Routes>
      <Route path="login" element={<Login />} />
      <Route path="register" element={<Register />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </section>
);

Drew Reese · Answer 1 · 2021-11-24T00:18:18

В приложении объявите Landing компонент, который будет страницей индекса, и визуализация AppRoutes по пути"/*", чтобы разрешить сопоставление подмаршрутов.

Апп

<Router>
  <Navbar />
  <Routes>
    <Route index element={<Landing />} />
    <Route path="/*" element={<AppRoutes />} />
  </Routes>
</Router>

Приложения

const AppRoutes = () => (
  <section className="container">
    <Routes>
      <Route path="login" element={<Login />} />
      <Route path="register" element={<Register />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </section>
);

Спасибо, глупо с моей стороны, я не мог решить эту маленькую проблему. Это отлично работает!
@Гази Не волнуйся, со всеми нами иногда такое случается. Не забывай, что делать, когда кто-то ответит. Ура!

Как получить маршруты из другого местоположения/функции в react-маршрутизатор-dom v6?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории