React Router V6 显示空白页面。

Question

我遇到了一个问题。我正在尝试使用React Router，但它一直显示空白页面。以下是我的代码：

App.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;

HomePage.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"，有人能告诉我出了什么问题吗？感谢所有帮助者。

- Shirley Cohen

---

这里运行良好。 - MWO

我认为你应该从HomePage组件中删除withRouter的导入，然后再尝试，否则你需要分享错误的截图。 - Gulshan Aggarwal

请检查浏览器控制台是否有错误。通常，如果出现“空白页面”，这意味着某种异常被抛出，并且应该在控制台中显示。 - tromgy

我在代码中没有发现明显的问题，如果我将它复制/粘贴到 codesandbox 中，我相信它应该可以正常呈现。 - Drew Reese

Answer 1

使用

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

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

- JASIM TK

Answer 2

我昨晚也遇到了同样的问题，可能是因为你的项目文件夹中没有安装react-router-dom，请尝试以下步骤：

cd [项目文件夹名称]

npm i react-router-dom

这对我有用！

- TheDev05

Answer 3

我也曾经遇到过完全相同的问题，几次如此。我的代码和你的一模一样。打开项目文件夹中的 package.json 文件，并确保在实际的项目文件夹中安装了 react-router-dom 而不是在其父文件夹中安装。

- Abiy Menberu

Answer 4

我将react-router-dom包的版本降级到^5... 然后它对我起作用了。

注意：Routes不是这个版本的方法。

- Jerevick

Answer 5

我今天遇到了这个问题。经过一些调查，我发现我在 ReactJS 项目的父文件夹中安装了 react-router-dom。

类似这样的 "C:\parent_foleder\reactjs_app"，你可以打开终端应用程序，cd 进入 parent_folder，然后使用 ls -a 命令查看是否存在 node_moudles、package.json 和 package-json.lock；如果这些文件存在于 parent_folder 中，请将它们删除，然后 cd 进入 reactjs_app 并再次运行 npm i react-router-dom。

- Cuong Vo

Answer 6

我曾经遇到过同样的问题，因为我使用了一个由(Create React App) CRA生成的应用程序，并且其中有一些旧的依赖项，其中之一是react-router-dom。如果是这种情况，您可能需要更新您的依赖项。

npm update

或者

yarn upgrade

这些命令将会更新您项目中的包到满足您package.json文件中指定版本范围的最新版本。

但是您也可以像下面这样专门更新react-router-dom

// 使用npm

npm update react-router react-router-dom

或者

// 使用 Yarn

yarn upgrade react-router react-router-dom

请告诉我哪个方法有效，因为这也让我头疼。

- Hilario Nengare

Answer 7

你犯了一个愚蠢的错误。 1. 去 package.json 文件中查看是否有 react-router-dom。 2. 如果没有，在你的项目文件夹中安装它。可能是因为你在桌面上创建了一个名为 "npx create-react-app router" 的文件夹，然后才安装了 react-router-dom。只需进入你的项目文件夹并进行安装即可。

- Himanshu Singh

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

Answer 8

import { Routes,Route } from 'react-router-dom';
import Login from 'components/Login';
import Headerfrom 'components/Header';
    
function App() {
      return (
        <div className="App">
          <Header />
          <Routes>
            <Route exact path='/' element={<Login />} />
          </Routes>
       
       
        </div>
      );
    }
    
    export default App;

以上代码是用于App.js文件，然后在index.js中应该是这样的。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>
);

- Salton

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community