无法访问用作 Route 元素的组件中的子组件（react-router-dom 6.3.0）

Question

我正在使用 react: 17.0.2 和 react-router-dom: 6.3.0。

我当前的 App.js 片段如下所示：

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>
        );
    }
}

到 '/' 的路由不应使用 Layout 组件，因此我需要将其从上下文中排除。

在 Layout.js 内，我需要像这样访问 children：

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

但是上面例子中的children是undefined。当我将 App.js 重写为下面的代码片段时，我可以在 Layout.js 中访问 children，但随后 '/' 也会使用布局呈现。

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;

如何在 Layout.js 中访问 children 并在没有布局的情况下呈现路径 '/'。

Answer 1

Route 和 Routes 在 v6 中的工作方式略有不同。 Route 和 React.Fragment 组件是 Routes 组件的唯一有效子组件，而其他 Route 组件是 Route 的唯一有效子组件。 Layout routes must render an Outlet 用于将其内容呈现到的嵌套路由组件。

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

const Layout = () => {
  return (
    <div>
      <main>
        <Outlet />
      </main>
    </div>
  );
};

无法访问用作 Route 元素的组件中的子组件（react-router-dom 6.3.0）

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

javascript

reactjs

react-router-dom