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>

必须按照path-to-regexp

中提到的npm包 react-router docs 理解的方式定义路径参数

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

1 个答案: