React-router-dom v6根路径'/'刷新时页面h1标签内容不渲染问题

问题原因 #

react-router-dom v6 对 Route 组件的语法做了强制性调整，所有路由对应的渲染内容必须通过 element 属性传入，不能直接写在 Route 标签的子节点位置，你写的根路径路由没有遵循这个规范，所以无法正常渲染内容。此外你导入的 Redirect 组件在 v6 版本已经被移除，属于无效导入可以直接删除。

修正方案 #

仅需要修改 HomePage.js 里的根路由写法即可，App.js 代码无问题不需要调整：

修正后完整 HomePage.js 代码 #

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

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

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

修改完成后刷新根路径即可正常显示对应h1文本。

内容的提问来源于stack exchange，提问作者Omar Abdelaty