Javascript 带有可选路径参数的Simple React路由器提供'；TypeError:无法读取属性'；过滤器'；未定义的'；

我有一个足够简单的React应用程序（使用

create React app

1.5.2创建，并删除了绒毛）。它默认安装了

react路由器

4.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'));

使用旧式

/（：filter）

呈现空白页面。

（/：过滤器）

也是如此

---

我读过许多类似的问题，但没有一个与我的问题相匹配。因此，我的问题是：如何在

根组件中声明可选路径参数，然后从
应用程序
组件中读取参数？
我认为在React Router v4中，您应该使用不同的道具：

然后将包含以下参数：

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

我们在这里：{match.params.filter}

我认为在React Router v4中，您应该使用不同的道具：

然后将包含以下参数：

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

我们在这里：{match.params.filter}

应用程序的
组件没有输入param@Kai：对不起，我没听懂你的话。
（{params}）=>…
不应该这样做吗？下面的答案就是我的意思xD！
App
组件没有输入param@Kai：对不起，我没听懂你的话。
（{params}）=>…
不应该这样做吗？下面的答案就是我的意思xD！谢谢你，塞萨尔。我会尽快接受你的答复。：）谢谢你，塞萨尔。我会尽快接受你的答复。：）
    <p>We are here: {match.params.filter}</p>