为什么 react-router-dom 在此代码中不起作用

Question

正在研究react app，尝试使用react-router-dom。我在浏览器中输入了“http://localhost:3000/”。我的期望是“主页”显示在浏览器中。但是，当浏览器呈现此代码时，什么也没有显示。

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

function App() {
  return (
    <>
      <div>
        <BrowserRouter>
          <Routes>
            <Route exact path='/' component={HomePage} />
            <Route path='/Contact' component={ContactPage} />
            <Route path='/About' component={AboutPage} />
            <Route component={NotFoundPage} />
          </Routes>
        </BrowserRouter>
      </div>
    </>
  );
}

function HomePage() {
  return <h2>Home</h2>
}

function ContactPage() {
  return <h2>Contact</h2>
}

function AboutPage() {
  return <h2>About</h2>
}

function NotFoundPage() {
  return <h2>NotFoundPage</h2>
}

export default App;

我不知道为什么它不能正常工作。

Answer 1

如果您使用的是路由器 v6，则需要使用 element 属性而不是 component。但更重要的是你需要实例化组件（将 element={HomePage} 更改为 element={< HomePage />}）。

查看文档：https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
      <div>
        <BrowserRouter>
          <Routes>
            <Route exact path="/" element={<HomePage />} />
            <Route path="/Contact" element={<ContactPage />} />
            <Route path="/About" element={<AboutPage />} />
            <Route component={<NotFoundPage />} />
          </Routes>
        </BrowserRouter>
      </div>
    </>
  );
}

function HomePage() {
  return <h2>Home</h2>;
}

function ContactPage() {
  return <h2>Contact</h2>;
}

function AboutPage() {
  return <h2>About</h2>;
}

function NotFoundPage() {
  return <h2>NotFoundPage</h2>;
}

export default App;

为什么 react-router-dom 在此代码中不起作用

Why react-router-dom does not work in this code

reactjs

react-router-dom