如何在反应路由器dom（v4）中使路径参数成为可选？

Question

这是我认为不正确和多余的代码：

<BrowserRouter>
 <Route exact={true} path="/" component={App}/>
 <Route path="/:filter" component={App}/>
</BrowserRouter>

我认为 exact={true} 是多余的，因为我可以简单地在以前的反应路由器版本中执行 path="/(:filter)" ？我不想使用 history.push :(

这就是我在页脚组件中使用 NavLink 的方式：

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="all"> 
      All 
    </FilterLink>
    {", "}
    <FilterLink filter="active">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="completed">
      Completed
    </FilterLink>
  </p>
);

还有我的 FilterLink：

const FilterLink = ({ filter, children }) => (
  <NavLink 
    to={ filter === 'all' ? '' : filter }
    activeStyle={{
      textDecoration: 'none',
      color: 'red'
    }}
  >
  {children}
  </NavLink>
);

路径在变化，例如：localhost:3000/active 但是样式没有效果，但是影响全部？当我在 localhost:3000/?

Answer 1

在 react-router v4 中，您可以定义一个可选的路径参数，例如

<BrowserRouter>
 <Route path="/:filter?" component={App}/>
</BrowserRouter>

必须按照 npm 包 path-to-regexp 理解的方式定义路径参数，如 react-router docs

中所述