布局组件中没有覆盖路由，但仍然在 React 中渲染布局

Question

I'm having to trouble making a route without layout component. Please check my code first.

// App.js

const App = () => {
  return (
    <div className={styles.container}>
      <Header />
      <main>
        <QuizBoxContainer>
          <Routes>
            <Route path='/' element={<QuizSelect />} />
            <Route path='quiz-for/:language' element={<QuizCard />} />
            <Route path='result' element={<ResultPage />} />
          </Routes>
        </QuizBoxContainer>
        <Routes>
          <Route path='wrong-answer' element={<WrongAnswer />} />
        </Routes>
      </main>
    </div>
  )
}

In the code, <QuizBoxContainer> is the layout component.

What I was trying to do is making another path,

<Routes>
   <Route path='wrong-answer' element={<WrongAnswer />} />
</Routes>

outside of <QuizBoxContainer> so I can use another layout on this component.

However, when I go to WrongAnswer,

It still renders.

What is wrong with my code, and how can I solve it?

Answer 1

Issue

The is because the QuizBoxContainer layout wrapper component is not rendered on any route, it's always rendered.

Solution

Move QuizBoxContainer into a layout route . You'll need to update QuizBoxContainer so it renders an Outlet component instead of the children prop.

Example:

import { Outlet } from 'react-router-dom';

const QuizBoxContainer = () => {
  ...

  return (
    ... quiz container layout/styling ...
    <Outlet /> // <-- nested routes render content here
    ...
  );
};

Render QuizBoxContainer on a layout route wrapping the routes you want to render within it, render the wrong answer route outside the layout route.

const App = () => {
  return (
    <div className={styles.container}>
      <Header />
      <main>
        <Routes>
          <Route element={<QuizBoxContainer />}>
            <Route path='/' element={<QuizSelect />} />
            <Route path='quiz-for/:language' element={<QuizCard />} />
            <Route path='result' element={<ResultPage />} />
          </Route>
          <Route path='wrong-answer' element={<WrongAnswer />} />
        </Routes>
      </main>
    </div>
  )
}