React Router可选路径参数报错：Cannot read property 'filter' of undefined

我太懂你这种卡在路由参数上的烦躁了——用了官方说的/:filter?语法报错，换旧语法又直接空白，确实踩坑。结合React Router 4.2.0的特性，给你一套能直接跑通的方案：

一、Root组件的正确路由配置 #

首先得确认你用的是react-router-dom（create-react-app默认集成的是这个，别搞错成核心包react-router了）。Root组件里的路由要这么写：

import React from 'react';
// 注意是react-router-dom里的BrowserRouter，不是react-router的Router
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './App';

const Root = () => (
  <Router>
    {/* 标准可选参数语法：参数名后面直接加问号 */}
    <Route path="/:filter?" component={App} />
  </Router>
);

export default Root;

划重点：

• 4.x版本已经彻底抛弃了3.x的/(:filter)或(/:filter)写法，用旧语法会导致路由完全不匹配，自然页面空白。
• 必须用BrowserRouter（或者HashRouter，看你部署需求），它会帮你处理浏览器的history对象，不用自己手动配置。

二、App组件读取参数的正确姿势 #

你遇到的Cannot read property 'filter' of undefined，90%是因为没找对参数的位置！在React Router 4.x里，路由参数是挂在props.match.params下面的，不是直接在props根节点。

函数组件写法： #

import React from 'react';

const App = (props) => {
  // 可选参数没传的话会是undefined，给个默认值更稳妥
  const currentFilter = props.match.params.filter || 'all';

  return (
    <div className="app-container">
      <p>当前筛选条件：{currentFilter}</p>
    </div>
  );
};

export default App;

类组件写法： #

import React, { Component } from 'react';

class App extends Component {
  render() {
    const currentFilter = this.props.match.params.filter || 'all';
    return (
      <div className="app-container">
        <p>当前筛选条件：{currentFilter}</p>
      </div>
    );
  }
}

export default App;

如果App不是直接被Route渲染怎么办？ #

要是你的App组件外面还嵌套了其他组件（比如Layout之类的），那match参数不会自动传递，这时候需要用withRouter高阶组件把路由props注入进去：

import React from 'react';
import { withRouter } from 'react-router-dom';

const App = (props) => {
  const currentFilter = props.match.params.filter || 'all';
  return <p>当前筛选条件：{currentFilter}</p>;
};

// 用withRouter包裹，就能拿到match、location、history这些路由相关props了
export default withRouter(App);

三、最后检查几个容易踩的坑 #

1. 别导错包：一定要从react-router-dom导入组件，不是react-router——后者的Router需要手动传入history对象，新手很容易在这里出错。
2. 路径匹配要准确：访问/时filter是undefined，访问/completed时filter就是completed，别写错路径导致参数读不到。
3. 默认值要加：因为是可选参数，用户直接访问根路径时filter会是undefined，加个默认值能避免页面出现奇怪的空白或报错。

内容的提问来源于stack exchange，提问作者sampathsris