react-router-dom v6.3.0路由组件无法渲染问题求助

你当前使用的react-router-dom@6.3.0和旧v5版本的路由API不兼容，你写的路由配置是v5版本的旧语法，所以匹配到路径后无法正常渲染对应组件。

v6版本对Route组件的规则做了两点核心改动，和你当前写法直接相关：

• 移除了component、render属性，所有要渲染的路由组件统一通过element属性传入，传入值必须是JSX节点格式，不能直接传组件函数引用
• 默认所有路由匹配规则为精确匹配，不需要额外添加exact属性，多余的exact可以直接删除

把你原来的错误路由配置：

<Routes>
  <Route exact path="/" component={HomeScreen}/>
</Routes>

替换为v6兼容的写法：

<Routes>
  <Route path="/" element={<HomeScreen />} />
</Routes>

修正后完整的App.js代码如下：

import './App.css';
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

// Screens
import HomeScreen from './screens/HomeScreen';

// Components 
import Navbar from './components/Navbar';
import SideDrawer from './components/SideDrawer';
import Backdrop from './components/Backdrop';

function App() {
  const [sideToggle, setSideToggle] = useState(false);

  return (
    <Router>
      <Navbar click={() => setSideToggle(true)} />
      <SideDrawer show={sideToggle} click={() => setSideToggle(false)} />
      <Backdrop show={sideToggle} click={() => setSideToggle(false)} />
      <main>
        <div className="app">This is a test</div>
        <Routes>
          <Route path="/" element={<HomeScreen />} />
        </Routes>
      </main>
    </Router>
  );
}

export default App;

如果改完代码还是看不到粉色背景的HomeScreen，检查两个点：

• 确认HomeScreen.css里.homescreen类的粉色背景样式写法正确，没有拼写错误
• 确认开发服务器已经正常热更新，必要时可以手动重启服务刷新页面验证

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