router-router-dom之使用三

路由的嵌套

修改HOME.js中代码如下

 <div>
              您好我是首页
              <a href="/home/news">正在热映</a>
              <a href="/home/comming">即将上映</a>
              <div>
             <Switch>
              <Route path="/home/" component={News} exact/>
              <Route path="/home/news" component={News} exact/>
              <Route path="/home/comming" component={Comming} exact/>
               </Switch>
              </div>
            </div>

新建两个视图页面News 和Comming

import React, { Component } from 'react'

export default class Comming extends Component {
    render() {
        return (
            <div>
                这里是即将上映的代码
            </div>
        )
    }
}

import React, { Component } from 'react'

export default class News extends Component {
    render() {
        console.log(this.props)
        return (
            <div>
                这里是正在的热映的代码
            </div>
        )
    }
}

修改主路由 将home中严格匹配取消掉 不然子路由进不来

ReactDom.render(
    <Router>   
    <Switch>
    <Route path="/" component={App} exact />
    <Route path="/home" component={Home} />
    <Route path="/mine" component={Mine} exact />
    <Route path="/center/:id" component={Center} exact/>
    <Route path="/404" component={NotFound} exact/>
    <Redirect to={{
        pathname:"/"
    }}></Redirect>
    </Switch>
    </Router>
    ,document.getElementById("root"));

最好还可以匹配不到的重定向页面 NotFound视图代码如下

import React, { Component } from 'react'

export default class NotFound extends Component {
    render() {
        return (
            <div>
                没有找到该页面
            </div>
        )
    }
}