带有可选路径参数的简单 React 路由器给出“TypeError：无法读取未定义的属性“过滤器”

Posted 2023-02-21

【中文标题】带有可选路径参数的简单 React 路由器给出“TypeError：无法读取未定义的属性“过滤器”

【英文标题】：Simple React Router with an Optional Path Parameter gives 'TypeError: Cannot read property 'filter' of undefined'

【发布时间】：2018-11-01 07:30:20

【问题描述】：

我有这个足够简单的 React 应用程序（使用 create-react-app 1.5.2 创建，并删除了绒毛）。它默认安装了react-router 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'));

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

但是，这会导致错误：TypeError: Cannot read property 'filter' of undefined at:

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

使用旧样式 /(:filter) 会呈现一个空白页面。 (/:filter)也是如此。

我已经阅读了许多类似的问题，但没有一个与我的问题相符。所以我的问题是：如何在我的Root 组件中声明一个可选路径参数，然后从我的App 组件中读取参数？

【问题讨论】：

App 组件没有输入参数

@Kai：对不起，没找到你。 ( params ) => ... 不应该这样做吗？

下面的答案就是我的意思xD！

【参考方案1】：

我认为在 React Router v4 中你应该使用不同的 prop，match：

const App = (
    match
) => (

然后将包含参数：

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

【讨论】：

谢谢@César。我会尽快接受你的回答。 :)