我正在使用最新版本的反應路由器。當我在組件中使用路由時，它們不會渲染任何東西，但是當我洗掉路由并僅使用它們作業正常的組件時。無法理解出了什么問題
這不起作用，并且不會在“/”上呈現任何內容或http://localhost:3000/
import React from "react";
import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return (
<Router>
<Route path="/" exact>
<Users />
</Route>
<Navigate to="/" />
</Router>
);
}
export default App;
這是渲染和作業正常。
import React from "react";
import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return <Users />;
}
export default App;
uj5u.com熱心網友回復：
import React, {useState} from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
import Profiles from "./Profiles" // this is dummy
function App() {
const [state, setState] = useState(false)
return (
<Router>
<Routes>
<Route path="/" element={<Users />}/>
<Route path="/profiles" element={state ? <Profiles /> : <Navigate to="/" />} />
{/* so you redirect only if your state is false */}
</Routes>
</Router>
);
}
export default App;uj5u.com熱心網友回復：
根據檔案，所有 Route 組件都應放置在 Routes 組件內，該組件嵌套在 BrowserRouter 內。
因此，考慮到這一點，將您的代碼更改為
import React from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Users />}/>
<Navigate to="/" />
</Routes>
</Router>
);
}
export default App;
uj5u.com熱心網友回復：
這是因為，您沒有提供要渲染的元素Route。它必須像element={<Users />}. 所以嘗試如下，
import React from "react";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Users />} />
<Navigate to="/" />
</Routes>
</Router>
);
}
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/493879.html
標籤：javascript 反应 反应路由器
上一篇：具有多個物件的C 陣列