react-router 路由在呈现时未提供所需的输出在网页上未显示任何内容

Question

我是 React 的初学者，我在主页上使用路由来对组件进行基本路由这是我主页组件上的代码，但当我运行服务器

时它仍然在我的网页上没有显示任何内容

import React,{ Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Switch, Route, Link, Redirect, Routes } from "react-router-dom";

export default class HomePage extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div>
          <Router>
              <Routes>
                <Route exact path='/' element={ <HomePage/> }><h1>This is the home page</h1></Route>
                <Route exact path='/join' element={ <RoomJoinPage/> }></Route>
                <Route exact path='/create' element={ <CreateRoomPage/> } ></Route>
              </Routes>
          </Router>
        </div>
        );
    }
}

我使用 webpack 配置来创建应用程序，因为我正在使用 React 和 Django。当我在堆栈上搜索解决方案时，有人在 post 上发表评论，就好像您正在使用 webpack 配置手动设置项目一样，它需要 devServer : {historyApiFallback: true,} 才能使 React 路由正常工作，所以我该怎么做，请帮助我从过去两天开始一直停留在这部分如果上面的解决方案是正确的那么请让我知道在哪里写下面的语句以使反应路线工作...

Answer 1

我看到您正在使用浏览器路由器作为路由器。我会尝试的一件事是使用 BrowserRouter 而不使用 as Router，就像这样 <BrowserRouter> </BrowserRouter>. 我会尝试的另一件事是使用 HashRouter 而不是 BrowserRouter，并在文件 index.js 中使用它，如下所示：

 ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
            <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

您的主页文件应如下所示：

import React,{ Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { Switch, Route, Link, Redirect, Routes } from "react-router-dom";   

export default class HomePage extends Component {
    constructor(props) {
      super(props);
    }  


    render() {
      return (
        <div>
          
              <Routes>
                <Route exact path='/' element={ <HomePage/> }><h1>This is the home page</h1></Route>
                <Route exact path='/join' element={ <RoomJoinPage/> }></Route>
                <Route exact path='/create' element={ <CreateRoomPage/> } ></Route>
              </Routes>
          
        </div>
        );
    }
}

如果这有任何效果，请分享 React 路由器的版本 dom 并在可能的情况下做出反应。之前我在RRD上也遇到过这种风格的问题。

react-router 路由在呈现时未提供所需的输出在网页上未显示任何内容

react-router routes not giving the desired output when rendered not showing anything on the webpage

django

reactjs

react-router

react-router-dom