使用react-router切换页面props不显示，是否为路由版本兼容问题？

问题原因 #

你遇到的两个问题都是同一个根源：当前安装的是react-router v6版本，但你使用的是react-router v5的路由写法，v6对路由API做了不兼容的改动。

1. 控制台警告的成因 #

• react-router v6的Route组件已经完全移除了v5支持的render、component属性，统一只能通过element属性指定路由要渲染的内容
• 你给路径为/的路由只配置了render属性，没有配置v6要求的element属性，所以系统判定该路由没有可渲染的内容，抛出对应警告，导致首页除了全局Header之外没有其他内容
• 额外说明：v6的路由默认就是精确匹配，exact属性已经废弃，写了也不会生效

2. VS Code标红props的成因 #

因为Route组件本身已经不支持render属性，所以你写的render={(props) => {}}里的props参数没有对应的类型定义，属于无效参数，编辑器就会给props标下划线提示语法问题。

修正后的代码 #

import { BrowserRouter as Router, Routes, Route, Fragment } from "react-router-dom";
import Header from "./components/layout/Header";
import Todos from "./components/Todos";
import AddTodo from "./components/AddTodo";
import About from "./components/pages/About";
import "./App.css";

// 类组件其余代码保持不变
render() {
  return (
    <Router>
      <div className="App">
        <div className="container">
          <Header />
          <Routes>
            <Route
              path="/"
              element={
                <Fragment>
                  <AddTodo addTodo={this.addTodo} />
                  <Todos
                    todos={this.state.todos}
                    markComplete={this.markComplete}
                    delTodo={this.delTodo}
                  />
                </Fragment>
              }
            ></Route>
            <Route path="/about" element={<About />}></Route>
          </Routes>
        </div>
      </div>
    </Router>
  );
}
// 其余代码保持不变
export default App;

补充说明 #

如果你的业务逻辑里需要用到原v5版本render回调提供的路由相关参数（比如location、match、history等），在v6版本中需要用对应的路由Hook（useLocation、useParams、useNavigate等）获取，如果是类组件无法直接使用Hook，可以单独封装一个函数组件包裹业务逻辑，再把路由参数通过props传给类组件即可。

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