React Router v1，v2和v3

Question

我想声明一个带有可选路径参数的路径，因此当我添加页面以执行额外的操作时（例如填充一些数据）：

http://localhost/app/path/to/page＆lt; =渲染页面 http://localhost/app/path/to/page/pathParam＆lt; =渲染页面一些数据根据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} />

我的react-router版本是：1.0.3

Answer 1

您发布的编辑对旧版本的React-router（v0.13）有效，不再有效。

React Router 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参数与最后一个/，?的网址段匹配，或者#。有关路径和参数的更多信息，请read more here。

React Router 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）。

Answer 2

对于在搜索后到达此处的任何React Router v4用户，<Route>中的可选参数均以?后缀表示。

以下是相关文档：

https://reacttraining.com/react-router/web/api/Route/path-string

路径：字符串

path-to-regexp理解的任何有效网址路径。
<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

<强>可选

参数可以带有问号（？），以使参数可选。这也将使前缀可选。

可以使用或不使用页码访问的站点的分页部分的简单示例。

<Route path="/section/:page?" component={Section} />

Answer 3

对于react-router V5及更高版本，将以下语法用于多条路径

<Route
          exact
          path={[path1, path2]}
          component={component}
        />

Answer 4

与常规参数一样，声明可选参数仅取决于Route的path属性；任何以问号结尾的参数都将被视为可选参数：

<Route path="to/page/:pathParam?" component={MyPage}/>

Answer 5

多个可选参数的工作语法：

  (with-open [reader (clojure.java.io/reader "My_Big_Log")]
    (frequencies
     (map #(re-find #"[a-z]+\.[a-z]+\.[a-z]+")
          (line-seq reader))))

现在，网址可以是：

/ section
/ section / page / 1
/ section / page / 1 / sort / asc

Answer 6

如果您希望进行完全匹配，请使用以下语法： (param)?。

例如

<Route path={`my/(exact)?/path`} component={MyComponent} />

有趣的是，您将可以使用props.match，而不必担心检查可选参数的值：

{ props: { match: { "0": "exact" } } }

React Router具有可选的路径参数

6 个答案:

React Router v1，v2和v3

React Router v4及以上