为什么来自“react-router-dom”的 BrowserRouter 和 Route 无法正常工作？答案

【问题标题】：Why is BrowserRouter and Route from 'react-router-dom' not working properly?为什么来自“react-router-dom”的 BrowserRouter 和 Route 无法正常工作？
【发布时间】：2022-01-13 10:26:41
【问题描述】：

这些是名为my-app的项目目录的内容。

node_modules
package-lock.json
package.json
public
└── index.html
src
├── App.js
├── index.js
└── pages
    └── Home.js

public/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- all the components are displayed in this #root element -->
    <div id="root"></div>
  </body>
</html>

src/App.js

import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';
import ReactDOM from 'react-dom';
import Home from './pages/Home';

function App() {
        return <>
                <BrowserRouter>
                        <Route exact path="/" component={Home}></Route>
                </BrowserRouter>
        </>;
}
export default App;

src/index.js

import ReactDOM from 'react-dom';
import App from './App';

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

src/pages/Home.js

function Home() {
        return <h1>Homepage</h1>
}
export default Home;

当我在my-app 目录中运行npm start 时，项目编译并显示以下消息：

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://<network_ip>:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

asset static/js/bundle.js 1.49 MiB [emitted] (name: main) 1 related asset
asset index.html 334 bytes [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 1.39 MiB (javascript) 28.1 KiB (runtime) [cached] 109 modules
webpack 5.66.0 compiled successfully in 1509 ms

但是，当我在 Web 浏览器上打开 http://localhost:3000 时，我得到一个空白页面，这意味着没有 JSX / HTML 呈现到 public/index.html 的 #root div 中。这只发生在我引入带有BrowserRouter 和Router 标签的行时。其他人能够重现此错误吗？我不知道这是怎么回事！

编辑：这是我正在使用的 node、npx 和 npm 的版本。

:~$ node -v
v16.13.2
:~$ npm -v
8.1.2
:~$ npx -v
8.1.2

【问题讨论】：

你使用的是什么版本的react-router？
``` "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", “反应脚本”：“5.0.0”，“网络生命体”：“^2.1.3”```
这里重要的是 react-router 的版本。

标签： javascript reactjs webpack react-router

【解决方案1】：

自react-router-dom v6 以来，它暴露的组件的一些props 发生了变化，例如Route，并且Switch 被Routes 替换：

您的代码已修改为与新更改相匹配：

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
      </Routes>
    </BrowserRouter>
  );
}
export default App;

另外，不需要<>（又名React.Fragment，因为BrowserRouter 是jsx 中唯一存在的项目。

【讨论】：

谢谢，现在可以正常使用了！我想我需要在每一行代码之前检查最新的文档。 react 包的更新越来越疯狂。
另外，我认为<BrowserRouter> 可以是返回的 JSX 代码的根元素。我认为片段<>可以省略。
是的，这就是我们都需要有效率的技能。虽然这种依赖升级并不常见。这些是重大变化，但不需要太多重写
@nikostav96 是的，谢谢。我将其添加到答案中。