react路由從V3升級(jí)到V4遇到的報(bào)錯(cuò)問題。

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版本升級(jí)到4版本，這樣的配置是錯(cuò)誤的，控制臺(tái)報(bào)錯(cuò)如下：

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做路由

回答

編輯回答

魚梓

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

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

2018年6月25日 20:03

編輯回答

冷溫柔

謝邀！
首先恭喜您已解決該問題。我就大致說一下4.0幾個(gè)注意的地方吧！

HashRouter 不支持 location.key 和 location.state。另外由于該技術(shù)只是用來支持舊版瀏覽器，因此更推薦大家使用 BrowserRouter。

只渲染出第一個(gè)與當(dāng)前訪問地址匹配的 <Route> 或 <Redirect>。4.0 機(jī)制里不默認(rèn)匹配第一個(gè)符合要求的，為什么？這種設(shè)計(jì)允許我們將多個(gè) <Route> 組合到應(yīng)用程序中，例如側(cè)邊欄（sidebars），面包屑等等。

<Route> 是 4.0 中最重要的組件了。它最基本的職責(zé)就是當(dāng)頁面的訪問地址與 Route 上的 path 匹配時(shí)，就渲染出對(duì)應(yīng)的 UI 界面。

具體配置請(qǐng)參考官網(wǎng)：https://reacttraining.com/rea...

2018年5月16日 03:10

編輯回答

慢半拍

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>
        )
    }

2018年1月8日 14:14