反应路由器显示空白页面答案

【问题标题】：react router showing blank page反应路由器显示空白页面
【发布时间】：2022-01-06 12:15:28
【问题描述】：

每当我使用 BrowserRouter 时，我的页面都会转换为空白页面。我试图重新安装 react-router 和 react-router-dom 但问题仍然没有解决。我正在使用这个版本： react-router-dom@6.2.1 react-router@6.2.1

请查看我的代码，如果代码有任何错误，请告诉我。

App.js

export default function App() {
  return (
    <div>
      <h1>Bookkeeper!</h1>
    </div>
  );
}

index.js

import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

package.json

{
  "name": "tempapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

请包含您的 index.html
@adambcomer 完成。在帖子中添加了 index.html
参考一个如何完成路由的教程，你的代码不完整，
你的代码没有问题你只是不知道如何使用 react-router-dom
我无法重现这一点。我创建了一个新的 create-react-app 项目并复制到您的代码中。它构建并呈现 App 组件。

标签： javascript reactjs react-router frontend react-router-dom

【解决方案1】：

尝试通过以下方式将 react-router-dom 安装到您的项目中 npm i react-router-dom

这样你的 package.json 文件看起来像这样

{ 
  "name": "tempapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
  "react-app",
  "react-app/jest"
 ]
},
 "browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
  ]
 }
}

【讨论】：

【解决方案2】：

在你的index.js 试试这个，

将import { render } from "react-dom"; 更改为import ReactDOM from 'react-dom'; 并将render 更改为ReactDom.render。

所以你的代码将如下所示。

import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
    
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      rootElement
    );

【讨论】：

还是不行。使用 react 路由器时只显示空白页。
@coder 你的控制台输出是什么！