React Router v6.3.0配置路由后访问对应路径页面不渲染

根因 #

你使用的react-router-dom 6.3.0属于v6大版本，该版本对Route组件API做了不兼容v5的调整，现有代码用的是v5旧语法，路由配置无法被框架识别，具体错误点：

• v6的Route不存在component属性，指定路由渲染内容必须用element属性，值直接传JSX节点
• v6路由默认开启精确匹配，旧版本的exact属性已废弃，无需添加

现有代码里两个路由都用了废弃的component属性传值，框架拿不到要渲染的内容，所以访问对应路径时页面空白。Segment组件本身没有问题，路径跳转逻辑也正常，从你打印的pathname结果就能验证。

修复代码 #

直接替换App组件内容即可：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Home from './pages/Home';
import Segment from './pages/Segment';
import List from './pages/List';
import Chat from './pages/Chat';

function App() {

  console.log(window.location.pathname==="/segment");
  console.log(window.location.pathname)
  return (
    <>
    <Router>
      <Header />
      <Routes>
        <Route path="/segment" element={<Segment/>} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
    </>
  );
}

export default App;

替换后访问/segment路径即可正常渲染Segment组件内容，组件内的打印日志也会正常触发。后续要新增List、Chat等路由，按相同格式配置path和element属性即可。

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