Precautions
1) When registering a child route, write the path value of the parent route
2) Route matching is performed in the order of registered routes
3) The following code is mainly the nesting of the Home component for routing
code example
App.jsx
import React, { Component } from 'react'
import { Route, Switch, Redirect} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' // About是路由组件
import Header from './components/Header' // Header是一般组件
import MyNavLink from './components/MyNavLink'
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header/>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 在原生html中,靠a标签实现页面的跳转 */}
{/* <a className="list-group-item active" href="./about.html">About</a>
<a className="list-group-item" href="./home.html">Home</a> */}
{/* 在React中靠路由链接切换组件 */}
<MyNavLink to="/about" title="About" >About</MyNavLink>
<MyNavLink to="/home" title="Home" >Home</MyNavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Switch>
<Route path= "/about" component={About}/>
<Route path="/home" component={Home}/>
{/* 重定向,在刚进入页面的时候显示的页面 */}
<Redirect to="/about"/>
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
Home.jsx
import React, { Component } from 'react'
import { Route, Switch ,Redirect} from 'react-router'
import MyNavLink from '../../components/MyNavLink'
import News from '../Home/News'
import Message from '../Home/Message'
export default class Home extends Component {
render() {
return (
<div>
<h2>我是Home的内容</h2>
<div>
<ul className="nav nav-tabs">
<li>
{/* <a className="list-group-item" href="./home-news.html">News</a> */}
<MyNavLink to='/home/news'>News</MyNavLink>
</li>
<li>
{/* <a className="list-group-item active" href="./home-message.html">Message</a> */}
<MyNavLink to='/home/message'>Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route to= '/home/news' component={News}/>
<Route to="/home/message" component={Message}/>
<Redirect to='/home/news'/>
</Switch>
</div>
</div>
)
}
}
Home-Message.jsx
import React, { Component } from 'react'
export default class Message extends Component {
render() {
return (
<div>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</div>
)
}
}
Home-News.jsx
import React, { Component } from 'react'
export default class News extends Component {
render() {
return (
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
)
}
}