React - Children component not showing (beginner)-CodePudding

I'm currently following a tuto on a django react authentification app and I have encountered an issue. In the tutorial a children component is shown when selected on the nav bar, however, when I pass the {children} argument, all I get is a white page.

Here's my code :

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Layout from './hocs/Layout';

import Home from './containers/Home';
import Register from './containers/Register';
import Login from './containers/Login';
import Dashboard from './containers/Dashboard';


const App = () => (
  <Router>
    <Layout>
        <Route exact path='/' component={Home} />
        <Route exact path='/register' component={Register} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/dashboard' component={Dashboard} />
    </Layout>
  </Router>
);

export default App;

and the Layout componenent

import React, { Fragment } from 'react';
import Navbar from '../components/Navbar';

const layout = ({children}) => (
    <Fragment>
        <Navbar />
        {children}
    </Fragment>
);

export default layout;

When I get rid of the {children} everything is working as expected (expect for the children being displayed of course).

I use React 17.0.2 and the tutorial is more than 2 years old ...

Thanks in advance !

CodePudding user response：

So if someone looks for the answer here's the right code :

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route path='/' element={<Home />}/>
        <Route path='/register' element={<Register/>} />
        <Route path='/login' element={<Login/>} />
        <Route path='/dashboard' element={<Dashboard/>} />
      </Routes>
    </Layout>
    <Home  />
  </BrowserRouter>
);

export default App;

I had to use both Routes and element

CodePudding user response：

If you use react-router-dom version 6 (you can see the version in your package.json - dependencies) you have to use it like this...

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './containers/Home';
import Register from './containers/Register';
import Login from './containers/Login';
import Dashboard from './containers/Dashboard';


const App = () => (
 <BrowserRouter>
   <Routes>
    <Layout>
      <Route path='/' element={<Home />}/>
      <Route path='/register' element={<Register/>} />
      <Route path='/login' element={<Login/>} />
      <Route path='/dashboard' element={<Dashboard/>} />
    </Layout>
   </Routes>
 </BrowserRouter>
);

export default App;

Regards