React Router含嵌套参数的Route未触发问题排查

你遇到的这个问题核心原因很明确：你的<Route>组件没有被Router容器（比如<BrowserRouter>）包裹。在react-router-dom v4.x版本中，所有路由相关的组件（包括<Route>、<Link>等）都必须嵌套在BrowserRouter或HashRouter这类Router组件内部才能正常工作——因为Router会提供路由所需的上下文环境（比如当前路径、匹配规则等），没有这个上下文，<Route>根本无法判断当前路径是否匹配，自然不会渲染对应的组件。

具体解决步骤： #

1. 在应用入口文件（通常是index.js）中导入BrowserRouter：

import { BrowserRouter } from 'react-router-dom';

2. 用BrowserRouter包裹你的<App>组件：
   修改入口文件的渲染代码，把App放在BrowserRouter内部：

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

额外优化建议： #

另外，建议你用<Switch>组件包裹所有<Route>，这样路由系统只会渲染第一个匹配成功的Route组件，避免多个Route同时渲染的情况（虽然你当前的exact配置可能不会有这个问题，但这是React Router的最佳实践）。修改后的App组件代码如下：

import { Switch, Route } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Switch>
          <Route exact path="/" component={PostList} />
          <Route exact path="/:category" component={PostList} />
          <Route exact path="/:category/:postid" component={PostDetails} />
        </Switch>
      </div>
    );
  }
}

这样修改后，访问/foo/bar时，Switch会依次检查三个Route：前两个exact路径和/foo/bar不匹配，第三个完全匹配，就会正确渲染PostDetails组件了。

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