是否有可能根据react-router-dom中相同url中的url参数值呈现不同的组件?

Question

所以基本上标题是我的问题。是否有可能实现这样的东西，只有url参数更改:

& lt;路由路径={'/用户/:id}组件={()=比;UsersPage}/祝辞

& lt;路由路径={'/用户/:filterOption}组件={()=比;UsersList}/祝辞

Answer 1

react-router-dom@5

是的，你绝对可以。Router分量包括匹配并呈现路由(与Switch组件独占相反)匹配它们)。这意味着Router将呈现与pathprop匹配的所有路由和重定向。

给定路径' "/users/someevalue& quot;:

<Router>
<Route path={'/users/:id'} component={()=> UsersPage}/>
<Route path={'/users/:filterOption'} component={()=> UsersList}/>
</Router>

两个组件都可以匹配和呈现。

Routecomponentprop注意事项!

路由呈现方法

当你使用component(而不是render或children)时，路由器会使用React.createElement从给定的组件创建一个新的React元素。这意味着如果你为组件道具提供一个内联函数，你将在每次呈现时创建一个新组件。这将导致现有组件卸载和新组件安装，而不仅仅是更新现有组件。当使用内联函数进行内联渲染时，请使用render或children prop。

这意味着如果您提供一个函数，则不应该使用componentprop。相反，请执行以下操作之一

<Router>
<Route path={'/users/:id'} component={UsersPage}/>
<Route path={'/users/:filterOption'} component={UsersList}/>
</Router>

或

<Router>
<Route path={'/users/:id'} render={()=> <UsersPage />}/>
<Route path={'/users/:filterOption'} render={()=> <UsersList />}/>
</Router>

或

<Router>
<Route path={'/users/:id'}>
<UsersPage />
</Route>
<Route path={'/users/:filterOption'}>
<UsersList />
</Route>
</Router>

react-router-dom@6

react-router-dom@6现在总是完全匹配并使用路径排名/评分系统，'/users/:id'和'/users/:filterOption'具有相同的特异性并将具有相同的分数。他们之间没有什么可以澄清的。相反，您将呈现单个路由，并且需要使用useParams钩子来读取路由参数，无论是在包装器组件中还是直接在路由组件中。

包装器组件示例。

const UserWrapper = () => {
const { id } = useParams();
return (
<>
<UsersPage id={id} />
<UsersList filterOption={id} />
</>
);
};

…

<Router>
<Routes>
<Route path={'/users/:id'} element={<UserWrapper />} />
...
</Routes>
</Router>

Answer 2

是的，我们可以在react-router中做到这一点，看看这篇文章，它是动态URL参数的最佳示例。