React - 未显示子组件（初学者）答案

【问题标题】：React - Children component not showing (beginner)React - 未显示子组件（初学者）
【发布时间】：2022-10-24 09:34:29
【问题描述】：

我目前正在关注 django react authentification 应用程序上的 tuto，但遇到了问题。在本教程中，当在导航栏上选择时会显示一个子组件，但是，当我传递 {children} 参数时，我得到的只是一个白页。

这是我的代码：

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;

和布局组件

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

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

export default layout;

当我摆脱 {children} 时，一切都按预期工作（当然要显示孩子）。

我使用 React 17.0.2，教程已经有 2 年多了...

提前致谢！

【问题讨论】：

我不明白你的渲染有什么问题，代码看起来是正确的，它在这个codesandbox 中渲染没有问题。你能分享你的 package.json 文件，以便我们确认使用的 npm 模块的版本吗？

标签： reactjs react-router react-router-dom

【解决方案1】：

因此，如果有人在这里寻找答案，那么这里是正确的代码：

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;

我不得不同时使用 Routes 和 element

【讨论】：

我明白了，所以你实际上设法安装react-router-dom v6，然后是的，您需要应用教程可能使用的这些更改。

【解决方案2】：

如果您使用 react-router-dom 版本 6（您可以在 package.json 中查看版本 - 依赖项），您必须像这样使用它...

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;

问候

【讨论】：

感谢您的快速回答，遗憾的是它仍然无法正常工作......我什至没有控制台中的日志来帮助我！
似乎 OP 正在使用 RRDv5，因为他们没有提到因错误使用 Route 组件而导致的 RRDv6 错误。顺便说一句，如果在此处使用您答案中的代码，您会看到这些错误。在 RRDv6 中所有 Route 组件必须被包裹在Routes 组件中，并且您不能将路由器包裹在另一个路由器中。
谢谢你们的回答，它通过结合两个来工作！
哦，对不起，是的，它必须包裹在 <Routes> 而不是 <Router> 问候
然后你可能想嵌套Routes里面Layout 因为只有 Route 或 React.Fragment 是 Routes 的有效子代。

【解决方案3】：

首先... 组件名称应以大写字母开头例如，您的布局组件以小写 l 开头，而不是大写 L 所以 React/Node 可能会将其编译为函数而不是组件 => 错误

其次... 如果上述答案都不起作用，请尝试使用 Layout 包装每个组件例如像这样

【讨论】：