React Router具有可选的路径参数 [英] React Router with optional path parameter
问题描述
我想声明一个带有可选路径参数的路径,因此当我添加页面以执行额外的操作时(例如填充一些数据):
I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data):
http:// localhost / app / path / to / page < =渲染页面
http:// localhost / app / path / to / page / pathParam < =根据pathParam使用
渲染页面一些数据
http://localhost/app/path/to/page <= render the page http://localhost/app/path/to/page/pathParam <= render the page with some data according to the pathParam
在我的反应路由器中,我有以下路径,以支持这两个选项(这是一个简化的示例):
In my react router I have the following paths, in order to support the two options (this is a simplified example):
<Router history={history}>
<Route path="/path" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
我的问题是,我们可以在一个路线中声明吗?如果我只添加第二行,则找不到没有参数的路线。
My question is, can we declare it in one route? If I add only the second row then the route without the parameter is not found.
编辑#1:
关于以下语法的此处提及的解决方案不起作用我,这是一个合适的吗?它是否存在于文档中?
The solution mentioned here about the following syntax did not work for me, is it a proper one? Does it exist in the documentation?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
我的react-router版本是:1.0.3
My react-router version is: 1.0.3
推荐答案
您发布的编辑对旧版本的React-router(v0.13)有效,不再有效。
The edit you posted was valid for an older version of React-router (v0.13) and doesn't work anymore.
由于版本 1.0.0
你定义可选参数:
Since version 1.0.0
you define optional parameters with:
<Route path="to/page(/:pathParam)" component={MyPage} />
以及多个可选参数:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
您使用括号(
)
包装路由的可选部分,包括前导斜杠( /
)。查看 路线匹配指南 官方文档页面。
You use parenthesis (
)
to wrap the optional parts of route, including the leading slash (/
). Check out the Route Matching Guide page of the official documentation.
注意: :paramName
参数匹配的URL段直到下一个 /
,?
,或#
。有关路径和参数的更多信息,请在此处阅读更多信息。
Note: The :paramName
parameter matches a URL segment up to the next /
, ?
, or #
. For more about paths and params specifically, read more here.
React Router v4与v1-v3根本不同,并且未在 官方文档 。
React Router v4 is fundamentally different than v1-v3, and optional path parameters aren't explicitly defined in the official documentation either.
相反,您被指示定义路径
path-to-regexp 理解的参数。这样可以更灵活地定义路径,例如重复模式,通配符等。因此,要将参数定义为可选参数,请添加尾随问号(?
) 。
Instead, you are instructed to define a path
parameter that path-to-regexp understands. This allows for much greater flexibility in defining your paths, such as repeating patterns, wildcards, etc. So to define a parameter as optional you add a trailing question-mark (?
).
因此,要定义可选参数,请执行以下操作:
As such, to define an optional parameter, you do:
<Route path="/to/page/:pathParam?" component={MyPage} />
以及多个可选参数:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注意: React路由器v4 不兼容与 react-router-relay (在此处阅读更多内容)。请改用v3或更早版本(建议使用v2)。
Note: React Router v4 is incompatible with react-router-relay (read more here). Use version v3 or earlier (v2 recommended) instead.
这篇关于React Router具有可选的路径参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!