React Router 渲染空白頁面

Question

我在使用 react router 時經常遇到這個問題，它只會讓我的整個應用程序空白。

最后的 ] 是一個拼寫錯誤，不會呈現空白頁面，它只會給出一些正常的錯誤

這是我的 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，上面有它們的名字。

Answer 1

你混淆了你的進口：

import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';

你有：

• 導入BrowserRouter作為Route組件
• 導入了缺少傳遞給它的一些必需道具的低級Router

修復導入：

• 導入BrowserRouter作為Router
• 導入Route組件

正確導入

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

如果不是復制/粘貼拼寫錯誤，請刪除App導出中的尾隨] ：

export default App;] export default App; .

Answer 2

如果在您的編輯器中運行的代碼與上面的代碼片段相同，則您的導出中有錯字（額外的] ）

export default App;

Answer 3

檢查您的默認 App export 刪除此] you have an array ]結束標記。 您的默認導出應該是這樣的：

export default App;

不是

export default App;]

Answer 4

如上所述修復導入，然后嘗試將整個應用程序包裝在 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 ，您使用的是哪一個？運行應用程序時控制台上是否記錄了某些內容？）