react路由从V3升级到V4遇到的报错问题。

Question

import { HashRouter, Route, Link, hashHistory, IndexRoute } from 'react-router-dom';
ReactDOM.render(
    <HashRouter history={hashHistory}>

        <Route path="/" component={BasePage}>
            <IndexRoute component={Login} />
            <Route path="/login" component={Login}/>
        </Route>

        <Route path="/" component={Base}>

            {/* Default route*/}
            <Route path="/singleview" component={SingleView}/>
            <Route path="/index" component={Index}/>
            <Route path="/account" component={Account}/>
            <Route path="/role" component={Role}/>
            <Route path="/search" component={Search}/>
            <Route path="/search/info" component={SearchUserInfo}/>
            <Route path="/search/device" component={SearchUserInfoDevice}/>
            <Route path="/organization" component={Organization}/>
            <Route path="/configfile" component={ConfigFile}/>
            <Route path="/submenu" component={SubMenu}/>
            <Route path="/app-push" component={AppPush}/>


        </Route>

        {/* Not found handler */}
        {/*<Route path="*" component={NotFound}/>*/}

    </HashRouter>,
    document.getElementById('app')
);

从开始的router3版本升级到4版本，这样的配置是错误的，控制台报错如下：

Uncaught Error: A <Router> may have only one child element
at invariant (eval at <anonymous> (app.js:758), <anonymous>:43:15)
at Router.componentWillMount (eval at <anonymous> (app.js:836), <anonymous>:83:29)
at eval (eval at <anonymous> (vendor171515.js:1493), <anonymous>:350:23)
at measureLifeCyclePerf (eval at <anonymous> (vendor171515.js:1493), <anonymous>:77:12)
at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (vendor171515.js:1493), <anonymous>:349:9)
at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (vendor171515.js:1493), <anonymous>:260:21)
at Object.mountComponent (eval at <anonymous> (vendor171515.js:1433), <anonymous>:50:35)
at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (vendor171515.js:1493), <anonymous>:373:34)
at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (vendor171515.js:1493), <anonymous>:260:21)
at Object.mountComponent (eval at <anonymous> (vendor171515.js:1433), <anonymous>:50:35)

不知道该如何配置。
采用HashRouter做路由

Answer 1

import {HashRouter ,Route,Switch,Redirect} from 'react-router-dom'
import App from '../containers/App'
import Home from '../containers/Home'
import NotFound from '../containers/404'
   <HashRouter>
                     <Switch>
                        <Route exact  path="/" component={App}/>  
                        <Redirect from="/home" to="/"/>                              
                        <Route  component={NotFound}/>
                    </Switch>                         
            </HashRouter >   
            

app.jsx

    render(){
        return(
            <div style={{height:"100%"}}>
            {
                this.state.initDone
                ?<Route path="/"  component={Home}/>                                                     
                :<div>加载中</div>
            } 
            </div>
        )
    }

Answer 2

谢邀！
首先恭喜您已解决该问题。我就大致说一下4.0几个注意的地方吧！

HashRouter 不支持 location.key 和 location.state。另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter。

只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。4.0 机制里不默认匹配第一个符合要求的，为什么？这种设计允许我们将多个 <Route> 组合到应用程序中，例如侧边栏（sidebars），面包屑 等等。

<Route> 是 4.0 中最重要的组件了。它最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

具体配置请参考官网：https://reacttraining.com/rea...

Answer 3

V4中没有IndexRouter了，需要Redirect代替，如： <Route exact path={'/index'} render={() => <Redirect exact to={'/'} />}/>
<HashRouter history={hashHistory}>内只能有一个子元素，你可以把内部Router用<Swtich>包裹起来。如：

<HashRouter history={hashHistory}>
    <Switch>
        <Route />
        <Route />
        <Route />
    </Switch>
</HashRouter>