React Router DOM

Router路由设置

Posted by MetaNetworks on February 18, 2020
本页面总访问量

React Router DOM路由无效显示白屏的解决方案

版本5.1.2

网上的各种方案都没用

大多数都是:

1
2
3
4
5
6
7
8
9
<Router>
  <div>
    <Switch>
      <Route exact path="/" Component={IndexPage}/>
      <Route path="/user/login" Component={LoginPage}/>
      <Route path="/user/register" Component={RegisterPage}/>
    </Switch>
  </div>
</Router>

但是在我这没用

经过认真研读官方Documentation后,发现官方用的不是Component而是在子标签里设置:

1
2
3
4
5
6
7
8
9
<Router>
  <div>
    <Switch>
      <Route exact path="/"><IndexPage/></Route>
      <Route path="/user/login"><LoginPage/></Route>
      <Route path="/user/register"><RegisterPage/></Route>
    </Switch>
  </div>
</Router>

效果图!!!终于出来了

效果图