React Router dom返回空对象

Question

我使用的是react路由器dom v6。如果我写这样的路线：

<Routes>
<Route path='/posts' element={<Posts/>}/>
<Route path='/posts/:id' element={<PostDetails/>}/>
<Route path='/about' element={<About/>}/>
<Route path='/' element={<Main/>}/>
<Route path='*' element={<NotFound/>}/>
</Routes>

没关系，useParams在PostDetails组件中返回｛id:number｝。

然而，如果我写的路线如下：

<Routes>
{routes.map(({path, component}) =>
<Route path={path} element={component()}/>
)}
</Routes>

useParams返回空对象。为什么会发生这种情况？

PS:routes是包含路径&组件值。实际routes值为：

export const routes = [
{
path: '/',
component: Main,
},
{
path: '/about',
component: About,
},
{
path: '/posts',
component: Posts,
},
{
path: '/posts/:id',
component: PostDetails,
},
]

Answer 1

您使用组件作为函数，但它们是JSX.Elements。

尝试用作

<Route key={path} path={path} element={<component />}/>

别忘了放钥匙。

Answer 2

我认为您有问题，因为如果您不使用<Routes>。

function App() {
return (
<Provider store={store}>
<ThemeProvider theme={theme}>
<Routes>
<PageNav/>
<Route key={path} path={path} element={<component />}/>
</Routes>
</ThemeProvider>
</Provider>
);
}

您可以查看此链接

Answer 3

正如@dogukyilmaz所提到的，组件不是函数。将组件值直接传递给Route组件道具不会成功。另一方面，通过React.createElement(component)使其成为

Answer 4

问题

问题是，当路由被渲染时，您直接调用React功能组件，而当路由匹配时，您可以正确访问道具/上下文等，作为React组件生命周期的一部分，而不是。

<Routes>
{routes.map(({ path, component }) =>
<Route path={path} element={component()} /> // <-- here
)}
</Routes>

换句话说，您有效地呈现了静态JSX，即直接将component作为函数调用的返回值。

我们不直接调用React中的React函数，而是将它们作为ReactNodes(也称为JSX(传递给。

解决方案

给定路线配置：

export const routes = [
{
path: '/',
component: Main,
},
{
path: '/about',
component: About,
},
{
path: '/posts',
component: Posts,
},
{
path: '/posts/:id',
component: PostDetails,
},
];

映射的组件应作为JSX传递，即<Component />。

<Routes>
{routes.map(({ path, component: Component }) =>
<Route key={path} path={path} element={<Component />} />
)}
</Routes>

您可能会发现，更容易根据react-router-dom使用的线路来调整路线配置。替换"；部件"；具有"；元素"；属性，并将CCD_ 8属性值更新为CCD_。

示例：

export const routes = [
{
path: '/',
element: <Main />,
},
{
path: '/about',
element: <About />,
},
{
path: '/posts',
element: <Posts />,
},
{
path: '/posts/:id',
element: <PostDetails />,
},
];

<Routes>
{routes.map(({ path, element }) =>
<Route key={path} path={path} element={element} />
)}
</Routes>
... or ...
<Routes>
{routes.map((route) =>
<Route key={route.path} {...route} />
)}
</Routes>

或者，因为您现在已经有效地将路由配置正确地声明为RRD消耗，所以将其直接传递给useRoutes钩子。

import { useRoutes } from 'react-router-dom';
import { routes } from '../path/to/routes';
...
const appRoutes = useRoutes(routes);
...
return (
...
{appRoutes}
...
);