如何在路径中对反应路线参数进行编码

Question

我正在处理一个reactJs项目，正在阅读代码并面临一个问题。

以下是路线的结构

<Routes>
<Route index element={<List />} />
<Route path={NewRelativePath} element={<New />} />
<Route path={RouteParams.subject} element={<Details />} />
<Route path={EditRelativePath} element={<Edit />} />
<Route
path={clusterSchemaSchemaDiffRelativePath}
element={<DiffContainer />}
/>
</Routes

我在这条路线<Route path={RouteParams.subject} element={<Details />} />上遇到问题。

RouteParamsubject可以包含类似test/test的值，并且我希望它们被转换为test%2Ftest，基本上我希望主题被编码。

RouterParam看起来像低于

export enum RouteParams {
subject = ':subject',
}

我试着通过像这样的改变来做encodeURIComponent

<Route path={encodeURIComponent(RouteParams.subject)} element={<Details />} />，但它打破了一切，而不是做得更好。

我能做些什么来解决这个问题吗？

非常感谢。

Answer 1

如果您想在路由中对某种参数进行编码，您应该在组件内部进行编码，而不是手动编码。所以像这个

<Routes>
<Route path="/subject/:subj" element={<Details/>} />
</Routes>

function Details(){
let {subj} = useParams();
const encodedSubj = encodeURIComponent(subj);
//do whatever you need to do with encodedSubj in here
}