我想声明一个带有可选的路径参数的路径,因此当我添加它时,页面要做一些额外的事情(例如填充一些数据):
http://localhost/app/path/to/page <= 渲染页面 http://localhost/app/path/to/page/pathParam <= 渲染页面,其中包括 根据pathParam的一些数据。
在我的react路由器中,我有以下路径,以支持这两个选项(这是一个简化的例子):
<Router history={history}>
<Route path="/path" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
我的问题是,我们可以在一个路由中声明吗?如果我只添加第二行,那么没有参数的路由就找不到了。
编辑#1:
这里提到的关于以下语法的解决方案对我不起作用,它是一个合适的解决方案吗?文档中是否存在?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
我的 react-router 版本是:1.0.3
你发布的编辑对React-router的旧版本(v0.13)有效,现在已经不起作用了。
从1.0.0
版本开始,你可以用以下方式定义可选参数:
<Route path="to/page(/:pathParam)" component={MyPage} />
并为多个可选参数:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
你使用小括号(``)
来包裹路由的可选部分,包括前导斜线(/
)。请查看官方文档中的路由匹配指南页。
注意: *":paramName "参数可以匹配一个URL段,直到下一个"/"、"? "或 "#"。更多关于路径和参数的具体信息,在这里阅读更多信息。
React Router v4与v1-v3有本质的不同,可选路径参数在官方文档中也没有明确定义。
相反,你被指示定义一个path-to-regexp能理解的path
参数。这使得你在定义路径时有更大的灵活性,例如重复模式、通配符等等。因此,要把一个参数定义为可选的,你要在后面加一个问号(?
)。
因此,要定义一个可选参数,你要这样做:
<Route path="/to/page/:pathParam?" component={MyPage} />
而对于多个可选的参数:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注意: *React Router v4与[tag:react-router-relay](在此阅读更多信息)**不兼容。请使用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} />
多个可选参数的工作语法:
<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />
现在,网址可以是:
1./节 2./section/page/1 3./section/page/1/sort/asc