在vitjs中使用嵌套路由时，在react router dom中收到错误

Question

当我用vite dev运行我的react项目时，我的项目运行良好。运行vite build && vite preview后，我得到一个错误与我的应用程序。

这里是错误

index-26685beb.js:4306 Error
at invariant (App-1ae6b17c.js:34:11)
at useRoutes (App-1ae6b17c.js:619:27)
at Routes (App-1ae6b17c.js:847:10)
at Xh (index-26685beb.js:3841:7)
at Wk (index-26685beb.js:6937:11)

没有提供错误消息，我必须在依赖项中进行一些挖掘。我发现它在我的react-router-dom依赖项中失败了:

function useRoutes(routes, locationArg) {
!useInRouterContext() ? invariant(false) : void 0; <-- fails here at invariant() call
let {
navigator
} = reactExports.useContext(NavigationContext);
...

我想这可能是因为我的项目中有嵌套的路由。这是它的样子

App.jsx

const Project = () => {
const loc = useParams();
const { export: componentexport } = projectMap[loc.id];
const Component = lazy(componentexport);
return (
<Suspense fallback={<Loading />}>
< Component />
</Suspense >
)
}
const App = () => {
return (
<Router>
<Routes>
<Route path={HOME.to} element={<Home />} />
<Route path={PROJECTS.to} element={<Projects />} />
<Route path={LOADING.to} element={<Loading />} />
<Route path="/projects/:id/*" element={<Project />} />
</Routes>
</Router>
);
}

这是其中一个项目组件

const Root = () => {
return (
<>
<Navbar />
<Outlet />
<Footer />
</>
)
}
const App = () => {
return (
<Routes>
<Route path='/' element={<Root />}>
<Route path='' element={<Home />} />
<Route path='about' element={<About />} />
</Route>
</Routes >
)
}

我注意到当我完全从组件中删除路由放置在<Project/>我的应用程序工作正常。我可以使用嵌套路由构建吗?我应该以某种方式设置我的访问配置吗?

Answer 1

所以看起来这个问题是由于本例中的vite build步骤而发生的。我有我的作品集和我的项目在两个单独的目录，每个目录都有自己的下载依赖

portfolio: Code/portfolio
project1: Code/project1

我所做的是将../../project1/src/App.jsx导入到我的投资组合中，作为一个组件使用。然而，在构建步骤中，依赖项被优化，但我在两个项目中都使用react-router-dom。当我为我的构建运行sourcemap时，我发现了以下内容:

sources = [
...,
"../../node_modules/@remix-run/router/dist/router.js",
"../../node_modules/react-router/dist/index.js",
"../../node_modules/react-router-dom/dist/index.js",
"../../src/utils/mainRoutes.js",
"../../../../polus-site/node_modules/@remix-run/router/dist/router.js",
"../../../../polus-site/node_modules/react-router/dist/index.js",
...,
] 

所以看起来我已经复制了react-router-dom依赖包，并且在我的构建中有两个单独的react-router-dom实例。

在这种情况下，我更新了我的构建文件，以指向我正在使用的react-router-dom的正确版本，例如，如果有useRoutes$1和useRoutes的实例，我会将所有案例切换到使用useRoutes$1，因为这是使用我的投资组合的路由器。

这并不一定是一个答案，因为我认为有一个构建配置来解决这个问题，但现在这是我部署投资组合的解决方案