react-router-dom从5.2.0升级到6.14.0后出现路由匹配警告问题

问题根源分析 #

导致你遇到的问题核心是 React Router v6 与 v5 的语法规则差异，主要有三个错误点：

1. 废弃的render属性：v6 彻底移除了 Route 的render、component属性，统一使用element传递组件实例
2. 无效的exact属性：v6 默认采用精确匹配规则，exact属性已被移除，写入后不会生效
3. 错误的路径格式：v6 对路径语法做了严格限制，*/component1这种写法不合法，必须使用标准绝对路径或参数化路径

修复后的完整代码 #

import React, { useEffect, useState } from "react";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useAppStyles } from "../xxxxx";

import ComponentOne from "../xxxxx";
import ComponentTwo from "../xxxxx";
import ComponentThree from "../xxxxx";
import ComponentFour from "../xxxxx";

const App = ({ config }) => {
  const classes = useAppStyles({});
  const [scopes, setScopes] = useState({});
  const [scopeError, setScopeError] = useState(false);

  useEffect(() => {
    httpService.init(config);
    userService.init(config);
    scopeService
      .getScopeConfig(config)
      .then((data) => setScopes(data))
      .catch(() => setScopeError(true));
  }, [config]);

  if (scopeError) {
    return <AppError message={SOMETHING_WENT_WRONG} />;
  } else if (isEmpty(scopes)) {
    return <Spinner className={classes.spinner} />;
  } else {
    const updatedConfig = { ...config, ...scopes };
    return (
      <MuiThemeProvider theme={theme}>
        <ThemeProvider theme={theme}>
          <ConfigContext.Provider value={updatedConfig}>
            <div className={classes.app}>
              <BrowserRouter>
                <Routes>
                  {/* 替换render为element，直接传递组件JSX */}
                  {/* 移除无效的exact属性 */}
                  {/* 使用标准绝对路径格式 */}
                  <Route path="/component1" element={<ComponentOne />} />
                  <Route path="/component2" element={<ComponentTwo />} />
                  <Route path="/component3" element={<ComponentThree />} />
                  <Route path="/component4" element={<ComponentFour />} />
                  
                  {/* 若需匹配任意前缀（如/abc/component1、/xyz/component1），可改用参数化路径： */}
                  {/* <Route path="/:prefix/component1" element={<ComponentOne />} /> */}
                  
                  {/* 若需要根路径跳转，添加默认路由： */}
                  {/* <Route path="/" element={<HomeComponent />} /> */}
                  
                  {/* 404页面兜底路由 */}
                  {/* <Route path="*" element={<NotFoundPage />} /> */}
                </Routes>
              </BrowserRouter>
            </div>
          </ConfigContext.Provider>
        </ThemeProvider>
      </MuiThemeProvider>
    );
  }
};

export default App;

额外注意事项 #

• 如果应用部署在子路径下（如/app/component1），需给BrowserRouter添加basename属性：<BrowserRouter basename="/app">
• v6 中路由匹配是绝对路径匹配，所有路径必须以/开头

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