使用 <Route> 标签时内容消失

Question

每当我在代码中添加一个 <Route> 标签时，所有内容都会从屏幕上消失！

我猜代码没问题！没有显示警告！！

添加 <Route> 标签之前的输出

当我添加一个 <Route> 标签时，输出就不再存在了！！！！

添加标签前的代码：

import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    </div>
  );
}

export default App;

后面的代码实际上是一样的，只是添加了标签：

import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Route></Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

当我添加标签时，内容消失了！

Answer 1

由于路由标记为空，因此您没有返回任何内容。您需要传递路径和应该为每个路径呈现的组件。在这种情况下，考虑到您只有一条路径并且想要显示 Hello World!!当应用程序启动时，您应该添加

<BrowserRouter>
    <Route exact path="/" component={App} />
</BrowserRouter>

这将在您启动应用程序时呈现您的应用程序组件。您可以类似地为其他路由添加其他组件。

Answer 2

检查你是 package.json 如果 react-router-dom 的版本是 6 然后将它降级到 5 这就是错误的来源。

我知道这个是因为现在npm install安装第6版作为它的默认版本，但是网上关于react router的教程和知识仍然是第5版。

所以在你的 package.json 上将版本从 6 更改为 5.3.0 和运行 npm install 在你的终端上

使用 <Route> 标签时内容消失

Content disappears when using the <Route> tag

javascript

reactjs

react-router

react-router-dom