注意事项
1)注册子路由的时候要写上父路由的path值
2)路由的匹配时按照注册路由的顺序来执行的
3)以下代码主要是Home组件进行路由的嵌套
代码示例
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>
)
}
}