143、React.js的导航组件的使用

import React from 'react'

import Home from './components/Home.jsx'
import Movie from './components/Movie.jsx'
import About from './components/About.jsx'

// 导入日期选择组件
import { DatePicker } from 'antd'


//导入路由模块
// HashRouter表示一个路由的根容器，将来，所有的路由相关的东西，都要包裹在HashRouter里面，而且，一个网站中
// 只需要使用一次HashRouter就好了
// Router表示一个路由规则，在Route上，有两个比较重要的属性，path component
// Link表示一个路由的连接，就好比vue中的 router-link to
import { HashRouter, Route, Link } from 'react-router-dom'

export default class App extends React.Component {
    debugger;
    constructor(props) {
        super(props)
        this.state = {}

    }

    render() {
        // 当使用HashRouter把App根组件的元素包裹起来之后，网站就已经启用路由了
        // 在一个HashRouter中，只能有唯一的一个根元素
        // 在一个网站中，只需要使用唯一的一次<HashRouter></HashRouter> 就可以了
        return <HashRouter>

            <div>
                <h1>这是网站的APP根组件</h1>
                <hr />

                <Link to="/home">首页</Link>&nbsp;&nbsp;
                <Link to="/movie/top250/10">电影</Link>&nbsp;&nbsp;
                <Link to="/about">关于</Link>&nbsp;&nbsp;

                <DatePicker></DatePicker>

                <hr />
                {/* Route 创建的标签，就是路由规则，其中path表示要匹配的路由，component表示要展示的组件 */}

                {/* 在vue中有个router-view 的路由标签，专门用来放置，匹配到的路由组件的，但是，在
                    react-router中，并没有类似于这样的标签，而是，直接把Route标签，当作坑(占位符)
                */}

                {/* Router具有两种身份:1、它是一个路由匹配规则，2、它是一个占位符，表示将来匹配到的组件都放到这个位置
                    这个位置，如果想让路由规则，进行精确匹配，可以为Route，添加exact属性，表示启用精确匹配模式
                */}

                <Route path="/home" component={Home} ></Route>&nbsp;&nbsp;

                <hr />

                {/* 默认情况下，路由中的规则，是模糊匹配的，如果路由可以部分匹配成功，就会展示这个路由对应的组件 */}
                {/* 如果要匹配参数,可以在匹配规则中，使用:修饰符，表示这个位置匹配到的是参数 */}
                <Route path="/movie/:type/:id" component={Movie} exact></Route>&nbsp;&nbsp;
                <hr />
                <Route path="/about" component={About}></Route>
                <hr />
            </div>
        </HashRouter>
    }



}

 

从导航组件进入到子组件中时，提取父页面传入到子组件中的参数:

movie页面提取父页面传入进来的参数：

使用this.props.match.params

import React from 'react'
import ReactDOM from 'react-dom'

export default class Movie extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            routeParams: props.match.params
        }
    }

    render() {
        console.log(this)
        
        // 如果想要从路由规则中，提取匹配到的参数，进行使用，可以使用this.props.match.params.****来访问
        return <div>
            
            Movie----{this.state.routeParams.type}----{this.state.routeParams.id}
        </div>



    }


}