我遵循了一個關于如何為我的 reactJS 程式顯示多個頁面的教程，它部分作業。我有兩個頁面：主頁和股票，它們都有一些示例文本。當我在 localhost URL 的末尾輸入 /home 或 /stocks 時，頁面會發生變化并顯示正確的文本。但是在擁有與教程 100% 相同的代碼后，我沒有在我的網站上獲得鏈接。
//index.js
ReactDOM.render(
<Router>
<Routes>
<Route exact path="/home" element={<Home/>} />
<Route exact path="/stocks" element={<Stocks/>}/>
</Routes>
</Router>,
document.getElementById('root')
);
//app.js
function App() {
return (
<div className="App">
<NavBar />
<Route exact path="/home" component={Home} />
<Route exact path="/stocks" component={Stocks} />
</div>
);
}
//NavBar.js
function NavBar()
{
return (
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/stocks">Stocks</Link>
</li>
</ul>
);
}
沒有錯誤，一切正常，但只有當我手動輸入頁面時。我試圖讓它當我輸入“npm start”時，主頁會自動打開，鏈接如下：股票，然后我可以點擊任何我想要的。
uj5u.com熱心網友回復：
//index.js
ReactDOM.render(
<Router>
<Routes>
<Route path="/*" element={<App/>} />
</Routes>
</Router>,
document.getElementById('root')
);
//app.js
function App() {
return (
<div className="App">
<NavBar />
<Routes>
<Route index path="/home" component={<Home/>} />
<Route path="/stocks" component={<Stocks/>} />
</Routes>
</div>
);
}
uj5u.com熱心網友回復：
您使用的是哪個版本的反應路由器？而且在您的 app.js 檔案中，您需要修復我在下面寫下的路線。
//app.js
....
<Route exact path="/home" element={<Home />} />
<Route exact path="/stocks" element={<Stocks/>} />
...
uj5u.com熱心網友回復：
像下面這樣單獨更改 app.js 和 index.js，
應用程式.js：
function App() {
return (
<div className="App">
<Router>
<NavBar />
<Routes>
<Route exact path="/home" element={<Home/>} />
<Route exact path="/stocks" element={<Stocks/>}/>
</Routes>
</Router>
</div>
);
}
index.js：
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<App />
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/529325.html