Cant access children in component used as element in Route (react-router-dom 6.3.0)

Im using react: 17.0.2 and react-router-dom: 6.3.0.

My current App.js snippet looks like this:

class App extends React.Component {

    render() {
        return (
            <div className="App">
                <Routes>
                    <Route element={<Layout/>}>
                        <Route path="/home" element={<Home/>}  />
                        <Route path="/login" element={<Login/>}  />
                        <Route path="/signup" element={<Signup/>}  />
                    </Route>
                    <Route exact path='/' element={<Intro/>}/> 
                </Routes>
            </div>
        );
    }
}

The route to '/' should not use the Layout component, so I need to exclude it from the context.

Within Layout.js I need to access the children like so:

const Layout = ({ children }) => {
  console.log(children)
  return (
        <div>
            <main>{children}</main>
        </div>
  );
};

But children are undefined in the above example. I can access children in Layout.js when I rewrite App.js to the below snippet, but then '/' is also rendered with the Layout.

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Layout>
                    <Routes>
                        <Route path="/home" element={<Home/>}  />
                        <Route path="/login" element={<Login/>}  />
                        <Route path="/signup" element={<Signup/>}  />
                        <Route exact path='/' element={<Intro/>}/> 
                    </Routes>
                </Layout>
            </div>
        );
    }
}

export default App;

How can I access children in Layout.js and render path '/' without the layout.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/ajEu7kn