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>

CodePudding user response：

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.