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>
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.
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: