React入門之--lReact-Route4

react的路由跳轉：自己的理解就是：

把index.js作爲文件的入口，把AppRouter引入到index.js文件中，作爲渲染的組件；

把App.js引入到AppRouter.js中作爲顯示頁面

SubRouter作爲子路由，用來配置City.js、Detail.js、Home.js路徑，

把SubRouter引入到ApppRouter中，並且在App.js中加上一句話，用來設置在App.js中顯示子頁面{this.props.children}

項目文件目錄：

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './router/AppRouter'


ReactDOM.render(
    <AppRouter/>,
    document.getElementById('root'));

AppRouter.js

import React, {Component} from 'react'
import {Route, BrowserRouter} from "react-router-dom";
import SubRouter from './SubRouter'
import App from '../component/App'

export default class AppRouter extends Component {
    render() {
        return (
            <BrowserRouter>
                <App>
                    <Route path='/' component={SubRouter}></Route>
                </App>

            </BrowserRouter>
        )
    }
}

SubRouter.js

import React, {Component} from 'react'
import {Route, Switch} from "react-router-dom";
import City from '../component/city'
import Detail from '../component/detail'
import Home from '../component/home'
import ErrPage from '../component/err'
import CityRoute from './CityRouter'

export default class SubRouter extends Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={Home}></Route>
                <City>
                    <Route path='/' component={CityRoute}></Route>
                </City>
                <Route path='/detail/:id' component={Detail}></Route>
                <Route component={ErrPage}></Route>
            </Switch>
        )
    }
}

Home.js、Detail.js、City.js

import React, {Component} from 'react'

export default class Home extends Component {
    render() {
        return (
            <div>首頁</div>
        )
    }
}




import React, {Component} from 'react'

export default class Detail extends Component {
    render() {
        return (
            <div>詳情
            </div>
        )
    }
}



import React, {Component} from 'react'
import {Link} from "react-router-dom";

export default class City extends Component {
    render() {
        return (
            <div>
                城市
                <ul>
                    <li>
                        <Link to='/city/beijing'>北京</Link>
                        <Link to='/city/shanghai'>上海</Link>
                    </li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

CityRoute.js

import React, {Component} from 'react'
import {Route, Switch} from "react-router-dom";
import Beijing from '../component/city/Beijing';
import Shanghai from '../component/city/Shanghai';
import ErrPage from '../component/err'

export default class CityRouter extends Component {
    render() {
        return (
            <Switch>
                <Route path='/city/beijing' component={Beijing}></Route>
                <Route path='/city/shanghai' component={Shanghai}></Route>
                <Route component={ErrPage}></Route>
            </Switch>
        )
    }
}

Beijing.js、Shanghai.js

import React, {Component} from 'react'

export default class Beijing extends Component {
    render() {
        return (
            <div>北京</div>
        )
    }
}





import React, {Component} from 'react'

export default class Shanghai extends Component {
    render() {
        return (
            <div>上海</div>
        )
    }
}