section is not a <Route> component. All component children of <Routes> must be a <Route>

user_15206662 0
Viewed 108

Register and login components need to be added to the container class. I followed a react course on Udemy. They are using an older version of react-router-dom. For this i used v6 react router dom and made changes, but this one I don't know what to do. This code is new to me, please assist me

function App() {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route exact path='/' element={<Landing />} />
          <section className='container'>
            <Route exact path='/register' element={Register} />
            <Route exact path='/login' element={Login} />
          </section>
        </Routes>
      </Fragment>
    </Router>
  );
}

error in console

[section] is not a <Route> component. All component children of <Routes> must be a <Route>
react-router-dom react-router reactjs javascript
2 Answers

I think the error is quite descriptive in itself. That the children of <Routes /> can only be <Route /> and <section /> doesn't satisfy that.

If you need both Register and Login components to have a wrapper of section with .container class.

We can achieve it through different approaches, here are a few of them.

For eg.:


/**
* 1. Putting them inside the components itself
*/

const Register = () => {
 return (
  <section className="container">
    // your other codes here
  </section>
 )
}

const Login = () => {
 return (
  <section className="container">
    // your other codes here
  </section>
 )
}

/**
* 2. As a reusable Layout wrapper or Higher Order Component or 
* Useful when you have many shared contents and styling 
*/

const Container = (props) => {
 return (
  <section className="container">
   // shared contents
   {props.children}
   // other shared contents
  </section>
 );
}

const Register = () => {
 return (
  <Container>
    // your other codes here
  </Container>
 )
}

const Login = () => {
 return (
  <Container>
    // your other codes here
  </Container>
 )
}

Hope that helps.

user_106236340

As the error is informing you, only Route or React.Fragment are valid children of the Routes component.

If you want to render several routed components into a specific layout, i.e. common UI/layout, then create a layout route for them to be nested into.

Make sure to also render Register and Login as JSX!

Example:

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

const SectionLayout = () => (
  <section className='container'>
    <Outlet /> // <-- nested routes render content here
  </section>
);

export default SectionLayout;

...

import SectionLayout from '../path/to/SectionLayout';

...

<Routes>
  <Route path='/' element={<Landing />} />
  <Route element={<SectionLayout />}>
    <Route path='/register' element={<Register />} />
    <Route path='/login' element={<Login />} />
  </Route>
</Routes>

For more information see:

user_86908570
Related