React-router-dom 不编译组件答案

【问题标题】：React-router-dom not compiling componentsReact-router-dom 不编译组件
【发布时间】：2022-01-10 14:49:38
【问题描述】：

我对 router-dom 有疑问。我正在根据 youtube 教程工作，我无法解决以下错误： [landingPageLayout] 不是组件。的所有子组件必须是 a 或。非常感谢您的指导。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>  
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import './App.css';
import { Routes, Route } from 'react-router-dom';
import landingPageLayout from './components/layouts/landingPageLayout';
import homePage from './components/pages/homePage';

const App = () => {
  return (
        <Routes>
          <landingPageLayout>
            <Route path="/"> 
              <homePage/>
            </Route>
          </landingPageLayout>
        </Routes>      
  );
}

landingPageLayout.js

import React from 'react';
import Header from '../navigation/header';

const landingPageLayout = ({...otherProps}) => {
    return (
        <div>
            <Header/>
        </div>
    )
}

export default landingPageLayout;

【问题讨论】：

在 JSX 中，自定义组件需要大写。所以LandingPageLayout。小写是为原生 dom 元素保留的，例如 div。
部分工作，组件 LandingPageLayout 突出显示它们正在使用，npm 编译没有错误但是当我进入主机页面时仍然存在相同的错误：[LandingPageLayout] 不是组件。的所有子组件必须是或

标签： javascript reactjs react-router-dom

【解决方案1】：

正如 Nicholas 在 cmets 中所说，您的 react 组件应始终大写。

除此之外，Routes 组件仅接受或作为子组件，因此您无法添加这样的布局。你可以做的是这样的：

   const App = () => {
      return (
         <Routes>
            <Route
               path='/*'
               element={
                  <LandingPageLayout>
                     <HomePage />
                  </LandingPageLayout>
               }
            />
         </Routes>      
      );
    }

如果您有多个路由需要此布局，则应将 HomePage 替换为具有所有路由的另一个组件。例如，我们可以称它为 PrivateRoutes。然后在上面的代码中，您将 <HomePage /> 替换为 <PrivateRoutes />，然后您的 PrivateRoutes 组件应如下所示：

   const PrivateRoutes = () => {
      return (
         <Routes>
            <Route path="home" element={<HomePage />} />
            <Route path="page1" element={<Page1 /> />
            //rest of routes
         </Routes>
      );
   }

【讨论】：