A route is not covered in layout component, but still renders layout in React

user_17689409 0
Viewed 41

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,

enter image description here

It still renders.

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

react-router-dom react-router reactjs javascript
1 Answers

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>
  )
}
user_86908570
Related