react-router-dom v6 如何从其他函数引入路由？页面空白该怎么解决？

核心问题是承载AppRoutes的父级Route未配置匹配路径，React Router v6 中所有Route组件必须指定path属性才能触发对应组件渲染。你当前的写法将子路由封装在独立组件内部的Routes中，需要父路由匹配所有后续路径，才能将路由匹配权交给子组件内部的路由规则。

方案1：最小改动适配现有代码 #

仅需修改App组件内承载AppRoutes的父Route配置，添加path="/*"通配符即可：

// Main App Function
const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route index path="/" element={<Landing />} />
          {/* 添加通配符路径，将所有非首页路径交给AppRoutes内部的Routes处理 */}
          <Route path="/*" element={<AppRoutes />} />
        </Routes>
      </Fragment>
    </Router>
  );
};

export default App;

修改后除首页/之外的所有路径都会命中该父路由，AppRoutes内部的路由规则就能正常匹配/login、/register等路径。

注意：React Router v6 已经默认优化了路径匹配逻辑，绝大多数场景不需要额外加strict属性，可以直接删除冗余的strict配置。

方案2：规范路由配置抽离（推荐） #

如果只是要把路由配置拆分到独立文件，更推荐使用useRoutes钩子实现，无需嵌套多层Routes，代码结构更清晰易维护：

1. 抽离独立的路由配置文件routes.js：

// routes.js
import Landing from './Landing'
import Login from './Login'
import Register from './Register'
import NotFound from './NotFound'

export const routeConfig = [
  {
    path: '/',
    element: <Landing />,
    index: true
  },
  {
    path: 'login',
    element: <Login />
  },
  {
    path: 'register',
    element: <Register />
  },
  {
    path: '*',
    element: <NotFound />
  }
]

2. 调整App组件直接使用路由配置：

import { Router, useRoutes } from 'react-router-dom'
import { routeConfig } from './routes'
import Navbar from './Navbar'

const App = () => {
  const routeElement = useRoutes(routeConfig)
  return (
    <Router>
      <Navbar />
      {/* 公共容器直接在外层包裹，无需在子路由重复声明 */}
      <section className="container">
        {routeElement}
      </section>
    </Router>
  );
};

export default App;

这种写法可以统一管理所有路由规则，公共布局也可以统一在外层声明，后续修改路由只需要调整routeConfig数组即可。

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