加载组件时 React Router Dom 渲染路由错误答案

【问题标题】：React Router Dom rendering route error with loading components加载组件时 React Router Dom 渲染路由错误
【发布时间】：2022-01-13 21:11:06
【问题描述】：

我有一个反应项目，我正在研究项目的导航栏元素。我目前正在项目中实施react-router-dom。我将<Route/> 嵌套在<Routes/> 中。所有这些都包含在<BrowserRoutes/> 中。它正在渲染导航栏。对于/，它应该检查并查看loggedIn 是true 还是false，并根据它是true 还是false 显示不同的组件。

如果为 false，则应该显示带有登录页面的登录组件。如果用户已登录，则应该显示提要组件。

现在它正在做的是用户没有登录，但它显示一个空白屏幕并给我以下错误：

Uncaught Error: [LandingPage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

这是我的代码：

import React, {useState} from 'react';
import Login from './Login';
import Signup from './Signup'
import LandingPage from './LandingPage'
import Feed from './Feed'
import axios from 'axios';
import { Routes, Route } from 'react-router-dom';

axios.defaults.baseURL = 'http://127.0.0.1:3333';
axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';

export const ContentContext = React.createContext()

export default function App() {

  const [loggedIn, setLoggedIn] = useState(false)
  return (
    <div className="App">
      <ContentContext.Provider value={ContentContextValue}>
        <Routes>
          <Route exact path="/">
            {loggedIn ? <Feed /> : <LandingPage />}
          </Route>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/signup" element={<Signup/>}/>
        </Routes>
      </ContentContext.Provider>
    </div>
  );
}

【问题讨论】：

能贴出LandingPage组件的代码吗？

标签： javascript reactjs express

【解决方案1】：

只需尝试调用元素内的页面进行路由，尝试如下：

<Route exact path="/" element={loggedIn ? <Feed /> : <LandingPage />} />

【讨论】：