React Router V6 顯示空白頁

Question

我面臨一個問題。 我正在嘗試使用 React Router，但它一直向我顯示一個空白頁面。 這是我的代碼：

應用程序.js：

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </Router>

  );
};

export default App;

主頁.js：

import React from "react";
import {withRouter} from "react-router-dom"

const HomePage = () => {

    return <div>hi</div>
}

export default HomePage;

index.js：

import React from "react";
import ReactDom from "react-dom";
import App from './App';


ReactDom.render(<App/>, document.getElementById("root"))

我已經安裝了“React Router V6”，誰能告訴我是什么問題？ 感謝所有的幫助者。

Answer 1

我嘗試了您提供的代碼，它工作正常

您可以在stackblitz中看到代碼： https://stackblitz.com/edit/react-wyl22d?file=src/App.js

您能提供更多詳細信息嗎？打開控制台查看是否有任何錯誤？

Answer 2

我發現錯誤，在 HomePage.js 組件中需要“（）”作為回報

import React from "react";
import {withRouter} from "react-router-dom"

const HomePage = () => {

    return (
     <div>
       Hi
     </div>   
    )

}

export default HomePage;

Answer 3

利用

import { Route, HashRouter as Router, Routes } from "react-router-dom";

 <Router>
  <Routes>
    <Route exact path="/" element={<Main />} />
    <Route path="/download" element={<Download />} />
  </Routes>
</Router>

Answer 4

我將 react-router-dom package 版本降級為 ^5 ... 它對我有用。

注意：Routes 不是這個版本的方法

Answer 5

我有幾次完全相同的問題發生在我身上。 我的代碼和你的完全一樣。 打開項目文件夾中的package.json文件，並確保已將react-router-dom安裝在實際項目文件夾中，而不是其父文件夾中。

Answer 6

昨晚我也遇到了同樣的情況，可能你的項目文件夾中沒有安裝react-router-dom ，試試：

cd [Project Folder name]

npm i react-router-dom

這對我有用！