路由配置不正确？不显示 H1 标签

Question

刚开始使用 React 中的路由。我正在尝试呈现我的主页。

目前，尽管页面本身存在 H1 标记，但我的主页 (/) 显示的是空白页面。完整的可重现代码如下：

Home.js

import React from 'react';

function Home () {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    );
}

export default Home;

App.Js

import "./App.css";
import Sidebar from "./Components/Sidebar";
import {Route, BrowserRouter as Router} from "react-router-dom";
import Home from "./Components/Home";
import SignUp from "./Components/SignUpPage";


function App() {
  return (
    <Router>
    <div className="App">
      <Sidebar />
    </div>
<Route path="/" component={Home}/>
<Route path="/SignUp" component={SignUp} />
    </Router> //surround app with router, and conditionally display pages based on what the user is on
  );
}

export default App;

我是不是漏掉了什么？

Answer 1

在 React router-dom v-6 中，他们改变了你提供组件的方式等等。这就是现在的正确原因：

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

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

这是一个视频，展示了 react-router-dom v-6 video.

中的所有变化

路由配置不正确？不显示 H1 标签

Routes not properly configured? Not showing H1 tag

reactjs

react-router-dom