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