React Router4 通配符

Question

path="/" 或者 path="/home" 都能加载Home组件，Route怎么写？

Answer 1

是的，Router v4 相较于之前的版本，是完全重写了，完全不一样的设计理念。

之前是配置式的，你写的 Route 实际上是对整个系统路由的配置，这样非常不 React。而 v4 Route 就是一个普通的组件，只是它的展示与否与当前路由相关。

对于你这种情况，通常的作法是这样的：

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/home" component={Home} />
    <Route path="/page1" component={Page1} />
    <Route path="/page2" component={Page2} />
</Switch>

切记，只有 第一个路由设置为 exact 不然页面内的二级路由，如：/home/list 就匹配不了了。

Answer 2

<Route exact path="/" />