我使用反應路由器經常遇到這個問題，它只會讓我的整個應用程式空白。
最后的 ] 是一個錯字，不會呈現空白頁，它只會給出一些正常的錯誤
這是我的 App.js：
import './App.css';
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';
import Home from './components/home';
import About from './components/about';
import Projects from './components/projects';
function App() {
return (
<Router>
<header>
<div className='logo'>MyPortfolio</div>
<h2>Eshwar Tangirala</h2>
<ul>
<Link><li>Home</li></Link>
<Link to="/about"><li>About</li></Link>
<Link to="/projects"><li>Projects</li></Link>
</ul>
</header>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="projects" element={<Projects/>}/>
</Routes>
</Router>
);
}
export default App;
我的其他組件，比如 home、about 和 projects，只有一個 H1，上面有他們的名字。
uj5u.com熱心網友回復：
你混淆了你的進口：
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';
你有：
- 匯入 a
BrowserRouter作為Route組件 Router匯入缺少傳遞給它的一些必需道具的低級
修復匯入：
- 匯入
BrowserRouter為Router - 匯入
Route組件
正確的匯入
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
如果不是復制/粘貼錯字，請洗掉匯出]的尾隨：App
export default App;]到export default App;.
uj5u.com熱心網友回復：
如果在您的編輯器中運行的代碼與上面的代碼片段相同，則您的匯出中有錯字（額外的]）
export default App;
uj5u.com熱心網友回復：
檢查您的默認應用程式匯出洗掉此]您有一個陣列]結束標記。您的默認匯出應該是這樣的：
export default App;
不是
export default App;]
uj5u.com熱心網友回復：
如上所述修復匯入，然后嘗試將整個應用程式包裝在 browserRouter 中，就像 index.js 上的這樣，而不是 app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
（這也可能是 react-router-dom 版本的問題，因為其中一些使用Switch而不是Routes，您使用的是哪一個？是在您運行應用程式時在控制臺上記錄的內容嗎？）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/426135.html
標籤：javascript 反应 反应路由器 反应路由器dom