React Router路由失效求助：组件无法渲染排查

问题现象 #

使用React Router时，路由组件无法渲染，浏览器页面空白，预期访问根路径时显示Hiii Join文本。

相关代码 #

index.js #

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

App.js #

import React from "react";

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

import Join from "./components/Join";
import Chat from "./components/Chat";

const App = () => {
    return (
         <Router>
            <div>
         <Routes>
         <Route  path="/" exact component={Join} />
         <Route path="/chat"  component={Chat} /> 
         </Routes>
         </div>
         </Router>
    );
}

export default App;

Join组件 #

import React from "react";

const Join = () => {
    return (
        <h1>Hiii Join</h1> 
    )
}

export default Join;

问题原因与解决方案 #

问题出在React Router v6的语法变更：

• v6版本中，Route组件不再支持component属性，需改用element属性，且要传入JSX元素（而非组件引用）
• exact属性已被移除，Routes组件默认会对路径进行精确匹配

修改后的App.js代码：

import React from "react";

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

import Join from "./components/Join";
import Chat from "./components/Chat";

const App = () => {
    return (
         <Router>
            <div>
         <Routes>
         <Route path="/" element={<Join />} />
         <Route path="/chat" element={<Chat />} /> 
         </Routes>
         </div>
         </Router>
    );
}

export default App;

修改后重新运行项目，根路径即可正常渲染Join组件的内容。

内容的提问来源于stack exchange，提问作者mukut-d