当我尝试在反应中使用路线广告路线时，我的页面不断消失

Question

我正在尝试使用 Routes 和 Route，当我这样做时，它没有显示 home.js，我得到一个空白页。 我是否需要下载一些东西，因为它在我的其他项目中运行良好，但我忘记了我之前是如何做到的。

这是我的 app.js 代码

import "./App.css";
import Home from "./components/Home.js";
import Navbar from "./components/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <div>
        <Routes>
          <Route path="/" element={<Home />} exact />
        </Routes>
      </div>
    </div>
  );
}

export default App;

这是我的 index.js 代码

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";


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

并且 tis 是 Home.js

import React from "react";
import Navbar from './Navbar.js';


const Home = () => {
  const text = "Home";

  return (
    <div>
      <h2>{text}</h2>
    </div>
  );
}

export default Home;

Answer 1

我认为您没有在正确的位置呼叫路由器。

你应该试试这个：

import "./App.css";
import Home from "./components/Home.js";
import Navbar from "./components/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} exact />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

还要删除索引中的 BrowserRouter

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import App from "./App";


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

Answer 2

我刚刚做了npm install --save react-router-dom并且它有效

Answer 3

1. Routes只能用作BrowserRouter的子级。

目前， App.js中的Routes组件是div的子组件。

2. 您只能使用一次BrowserRouter 。

一个典型的方法可能是让你的index.js保持原样，这样BrowserRouter被使用一次来包装你的整个应用程序，并且你的所有路由都直接在它下面的App中，将你的所有路由保持在顶层。

在 index.js 中：

<BrowserRouter>
  <App />
</BrowserRouter>

然后，在App.js中直接返回所有路由（这里Routes是BrowserRouter的直接子级）：

App.js 内部：

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

随着您的应用程序变得越来越复杂，新的路由将被添加到App.js中，但您不会返回任何 JSX，因为这是不允许的。 例如，它可能看起来像这样：

function App() {
  return (
    <Routes>
      <Route path={'/'} element={<Navigation />}>
        <Route index element={<Home />} />
        <Route path='about' element={<About/>} />
        <Route path='shop' element={<Shop/>} />
        <Route path='blog' element={<Blog />} />
      </Route>
    </Routes>
  );
}