带有可选路径参数的简单反应路由器给出了“类型错误：无法读取属性”未定义的“过滤器”

Question

我有这个足够简单的React应用程序（创建与create-react-app1.5.2，并删除绒毛）。默认情况下，它安装了react-router4.2.0。

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import history from 'history/createBrowserHistory';

const App = ({
    params
}) => (
    <div>
        We are here: {params.filter}
    </div>
);

const Root = () => (
    <Router history={history()}>
        <Route path="/:filter?" component={App} />
    </Router>
);

ReactDOM.render(<Root />, document.getElementById('root'));

我使用下面答案中描述的语法来创建可选的路径参数：https://stackoverflow.com/a/40872420/1461424

但是，这会产生错误：TypeError：无法读取未定义的的属性过滤器：

         <p>We are here: {params.filter}</p>

使用旧式/（：filter）呈现空白页面。（/：过滤器）也是如此。

我读过许多类似的问题，但没有一个与我的问题相匹配。所以我的问题是：如何在根组件中声明可选路径参数，然后从应用程序组件中读取参数？

Answer 1

我认为在React路由器v4中，您应该使用不同的道具，匹配：

const App = ({
    match
}) => (

然后将包含以下参数：

    <p>We are here: {match.params.filter}</p>