根目录下的 React-router 可选路径参数

Posted 2023-02-21

【中文标题】根目录下的 React-router 可选路径参数

【英文标题】：React-router optional path parameters at root

【发布时间】：2018-09-29 04:16:15

【问题描述】：

我对如何从根目录执行（多个）可选路径参数感到有些困惑。我正在使用 react-router 3 和 redux 4.3。

据我了解，(/:param1)(/:param2) 应该可以工作，但在加载应用程序时出现以下错误：

[react-router] 位置“/property/3633”不匹配任何路由。

index.js：

import React from 'react';

import ReactDOM from 'react-dom';

import  Provider  from 'react-redux';

import  Router, browserHistory, Route  from 'react-router';

import  syncHistoryWithStore  from 'react-router-redux';

import configureStore from './store/configureStore';

import MyContainer from "./containers/MyContainer";

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store=store>
        <Router history=history>
            <Route path="/(/:Type)(/:Id)" component=MyContainer/>
        </Router>
    </Provider>,
    document.getElementById('root'),
);

仅供参考，我试过了：

path="(/:Type)(/:Id)" 
path="(/:Type)/(/:Id)" 
path="/(/:Type)/(/:Id)" 
path="/(/:Type)(/:Id)" 
path="/:Type/:Id" // Only works when params are supplied

这很有效：

<Route path="/test(/:Type)(/:Id)" component=MyContainer/>

但同样，这不是：

<Route path="/(/:Type)(/:Id)" component=MyContainer/>

【问题讨论】：

path="(/:Type)(/:Id)" 怎么样？

【参考方案1】：

你需要添加一些真实的路径，而不是直接给出参数。 <Route path="/get/(:Type)/(:Id)" component=MyContainer/>

【讨论】：

他正在使用 react-router v3

如果这些参数存在，

<Route path="/:Type/:Id" component=MyContainer/> 确实有效，如果不存在，则我收到错误消息：Location "/" did not match any routes。是的 react-router v3

@ians 你需要添加一些真实的路径，而不是直接给出参数。

@ChasingUnicorn <Route path="/test(/:Type)(/:Id)" component=MyContainer/> 有效。那么有没有办法在路由中添加可选参数呢？

查看这篇文章：***.com/questions/35604617/…。这可能会有所帮助。

【参考方案2】：

今天遇到了同样的问题。我设法像这样解决它：

<Route path="/(:param1)(:/param2) component=SomeComponent"

【讨论】：

这对我有用，不知道我是怎么错过那个配置的。