我想声明一个带有可选路径参数的路径,因此当我添加它时,页面会做一些额外的事情(例如填充一些数据):
http://localhost/app/path/to/page <= 渲染页面 http://localhost/app/path/to/page/pathParam <= 根据 pathParam 用一些数据渲染页面
在我的反应路由器中,我有以下路径,以支持这两个选项(这是一个简化的示例):
<Router history={history}>
<Route path="/path" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
我的问题是,我们可以在一条路线上声明它吗?如果我只添加第二行,则找不到没有参数的路由。
编辑#1:
here 提到的关于以下语法的解决方案对我不起作用,它是正确的吗?它是否存在于文档中?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
我的反应路由器版本是:1.0.3
您发布的编辑对旧版本的 React-router (v0.13) 有效,并且不再起作用。
React 路由器 v1、v2 和 v3
从版本 1.0.0
开始,您定义可选参数:
<Route path="to/page(/:pathParam)" component={MyPage} />
对于多个可选参数:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
您使用括号 (
)
包裹路由的可选部分,包括 前导斜杠 (/
)。查看官方文档的 Route Matching Guide 页。
注意: :paramName
参数匹配到下一个 /
、?
或 #
的 URL 段。有关路径和参数的详细信息,请参阅read more here。
React 路由器 v4 及更高版本
React Router v4 与 v1-v3 根本不同,可选的路径参数也没有在 official documentation 中明确定义。
相反,系统会指示您定义一个 path-to-regexp 可以理解的 path
参数。这为定义路径提供了更大的灵活性,例如重复模式、通配符等。因此,要将参数定义为可选参数,请添加尾随问号 (?
)。
因此,要定义可选参数,您可以:
<Route path="/to/page/:pathParam?" component={MyPage} />
对于多个可选参数:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注意: React Router v4 不兼容与 react-router-relay (read more here)。请改用 v3 或更早版本(推荐 v2)。
对于搜索后到达此处的任何 React Router v4 用户,<Route>
中的可选参数用 ?
后缀表示。
以下是相关文档:
https://reacttraining.com/react-router/web/api/Route/path-string
path: string path-to-regexp 理解的任何有效 URL 路径。
<Route path="/users/:id" component={User}/>
https://www.npmjs.com/package/path-to-regexp#optional
可选的
参数可以用问号 (?) 作为后缀,以使参数可选。这也将使前缀可选。
可以使用或不使用页码访问的站点的分页部分的简单示例。
<Route path="/section/:page?" component={Section} />
<Match pattern />
现在又是 <Route path />
,但问号后缀仍然是现在处理可选参数的方法。
players
、players/123
、players/123/edit
、players?unseen=true
。可选参数 ?unseen
对我不起作用。尽管我尝试了此讨论中的所有修复。您能否提供正确的路径字符串来处理这个问题?提前致谢!
example.com/search?query=test
这样的 URL,请尝试使用下一个模式 /:search(search)
。
多个可选参数的工作语法:
<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />
现在,url 可以是:
/section /section/page/1 /section/page/1/sort/asc
好吧,既然您提到您的 react-router 版本为 1.0.3,您可以在之前的答案中找到您的解决方案。
但是,从 React Router v6 开始,该选项已被删除,如前所述。 here
因此,对于 React Router v6,以下内容:
将被替换为:
或者您也可以使用:
对于 react-router V5 及更高版本,请使用以下多路径语法
<Route
exact
path={[path1, path2]}
component={component}
/>
与常规参数一样,声明可选参数只是 Route 的 path 属性的问题;任何以问号结尾的参数都将被视为可选参数:
<Route path="to/page/:pathParam?" component={MyPage}/>
正如 Sayak 所指出的,可选参数已从 React Router V6 中删除。我发现的最简单的解决方案是只制作两条路线。一个用于不带参数的 url,另一个用于:
<Route path="/product/:productName/" handler={SomeHandler} />
<Route path="/product/:productName/:urlID" handler={SomeHandler} />
如果您希望进行完全匹配,请使用以下语法:(param)?
。
例如。
<Route path={`my/(exact)?/path`} component={MyComponent} />
这样做的好处是您可以使用 props.match
,而且您不必担心检查可选参数的值:
{ props: { match: { "0": "exact" } } }
/route(/:category/(:article)