react-router-dom 不显示组件

Question

我正在尝试通过 react-router-dom 在我的 React 项目中显示我的“主页”组件。 以为我把你的语气说对了，我没有编译时错误，但 Home 组件没有出现。 你有想法吗？

应用程序.js：

import Navbar from "./Components/Navbar";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Home from "./Pages/Home";

function App() {
  return (
    <div className="App">
     <BrowserRouter>
        <Navbar />
        <Routes>
          <Route pathname="/" element={<Home />}> </Route>
        </Routes>
      </BrowserRouter>

    </div>
  );
}

export default App;

主页.js：

import React from "react";
import banner from "../assets/banner.jpg";
import {Link} from 'react-router-dom';
import '../Styles/Home.css';

function Home(){
    return (
        <div className="home" style={{ backgroundImage: `url(${banner})` }}>
            <div className="headerContainer">
                <h1>Food Corner</h1>
                <p>AMERICAN FOOD AT A CLICK.</p>
                <Link> 
                <button> Order Now </button>
                 </Link>
            </div>
        </div>
    );
}

export default Home;

Answer 1

如果这是Router Router v6（假设您使用的是<Routes>...</Routes> ），则道具名称是“path”而不是“pathname”

所以这：
<Route pathname="/" element={<Home />}> </Route>
应该是这样的：
<Route path="/" element={<Home />}> </Route>

以下是 React-Router-Dom v6 的文档（与 v5 文档不同）：这里

您还应该更改您的 react-router-dom 导入。 您应该将 BrowserRouter 作为路由器导入，例如：

import { BrowserRouter as Router } from 'react-router-dom'

Answer 2

你有几个小问题：

1. Route组件使用path属性，而不是pathname属性。 如果没有path道具，就没有匹配的路径，并且Home不会被渲染。

    <Route path="/" element={<Home />} />

2. Link缺少它所链接的内容，即它缺少to道具。 这会导致TypeError: Cannot read properties of undefined (reading 'pathname')错误。 添加to道具链接目的地。 例子：

    <Link to="/order"> <button> Order Now </button> </Link>