當我嘗試在反應中使用路線廣告路線時，我的頁面不斷消失

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>
  );
}