React router V4中的默认路由

Question

React router v4中去掉了IndexRoute，那么如何设置默认路由呢～

class MainComponent extends Component{
    render(){
        return <div id="stage">
                <Switch>
                    <Route exact path='/' component={IndexComponent}/>
                    <Route path='/user' component={UserComponent}/>
               
                </Switch>
        </div>
    }
}

网上有这样写的：

class MainComponent extends Component{
    render(){
        return <div id="stage">
                <div><IndexComponent></div>
                <Switch>
                    <Route exact path='/' component={IndexComponent}/>
                    <Route path='/user' component={UserComponent}/>
               
                </Switch>
        </div>
    }
}

我这样写的时候会出现渲染别个页面组件的时候都会把IndexComponnet这个默认页面组件渲染了出来，麻烦解答一下。

Answer 1

let Routes = (<Router>
  <div>
    <Link activeClassName="active" exact={true} to={{pathname: '/index'}}>首页</Link>　
    <Link activeClassName="active" to={{pathname: '/error',search:'?msg=错误页面'}}>错误页面</Link>
    <div className="route-content">
      <Switch>
        <Route path="/index" exact component={HomePage}/>
        <Route path="/error" component={errorPage}/>
        <Redirect path="/" to={{pathname: '/index'}} />
      </Switch>
    </div>
  </div>
</Router>)

exact配合Redirect就可以了

Answer 2

加exact 属性

<HashRouter>
        <Switch>
            <Route path="/" component={Welcome} exact />
        </Switch>
    </HashRouter>

或者这样 匹配不到就匹配 MainRoot 了

<HashRouter>
        <Switch>
            <Route path="/" component={Welcome} exact />
            <Route path="/login" component={Login}/>
            <Route path="/main" component={MainRoot}/>
            {/* 这样写似乎很奇怪，但使用 Redirect 会导致main页面重新加载暂时这样避免 */}
            <Route path="/:a" component={MainRoot}/>
        </Switch>
    </HashRouter>