我有一個反應專案，我正在研究專案的導航欄元素。我目前正在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>
);
}
uj5u.com熱心網友回復：
只需嘗試呼叫元素內的頁面進行路由，嘗試如下：
<Route exact path="/" element={loggedIn ? <Feed /> : <LandingPage />} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/411364.html
標籤：
上一篇：傳入的引數必須是12位元組的字串