执行npm start编译成功跳转浏览器无输出，附React路由相关代码求排查

问题根因 #

你安装的react-router-dom为6.x版本，该版本相比5.x做了大量不兼容的API调整，你当前使用的还是5.x版本的路由写法，所以路由规则不生效、页面无内容。

具体修复步骤 #

1. 修改App.js代码 #

首先调整导入的API，新增Routes组件包裹所有Route，同时将component属性替换为element属性，传入组件的JSX实例：

import React, { Component } from 'react';
import Home from './Home';
import About from './About';
import './App.css';
// 新增导入Routes
import { Routes, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="App">
        {/* 用Routes包裹所有Route */}
        <Routes>
          <Route path="/" element={<Home />}/>
          <Route path="/about" element={<About />}/>
        </Routes>
      </div>
    );
  }
}

export default App;

2. 检查入口文件index.js配置 #

确认你已经用BrowserRouter组件包裹了整个App组件，示例如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 导入BrowserRouter
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3. 移除多余依赖（可选） #

你项目中安装的react-router-native是React Native端使用的路由库，Web项目不需要，可执行以下命令删除避免依赖冲突：

npm uninstall react-router-native

修改完成后重新执行npm start即可正常看到页面内容。

内容的提问来源于stack exchange，提问作者reju