react——路由跳转、动态路由、get传值

https://reacttraining.com/react-router/web/example/basic   // git 实例地址

1.安装 npm install react-router-dom --save

2.引入  import { BrowserRouter as Router, Route, Link } from "react-router-dom"

3.在组件根节点外面包裹一层<Router></Router>标签

4.根据路径跳转 <Route path="/new" component={New} />   // path是路径 ，component对应着组件  （此时输入对应路径即可跳转到对应页面）

5.<Link to="/new">New</Link>  // 用Link标签模拟一个人a标签,点击跳转

import React from 'react'
import LifeCycle from './lifeCycle'
import New from './new'
import Home from './Home'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
class RoutePage extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value: '路由跳转页面'
        }
    }
    render() {
        return(
            <Router>
            <div>
                <h3>{this.state.value}</h3>
                <Link to="/">Home</Link>
                <Link to="/about">New</Link>
                <Link to="/topics">LifeCycle</Link>
                <Route exact path="/" component={Home} /> // exact表示严格匹配
                <Route path="/about" component={New} />
                <Route path="/topics" component={LifeCycle} />

            </div>
            </Router>
        )
    }
}

export default RoutePage

 动态路由

import React from 'react'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import Content from './content'
import GetTvalue from './getTvalue'
class RouterPage extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value :'新闻页面',
            arr: [
                {
                    aid: 1,
                    title: 111
                },
                {
                    aid: 2,
                    title: 222
                },
                {
                    aid: 3,
                    title: 333
                },
                {
                    aid: 4,
                    title: 444
                }
            ]
        }
    }
    render() {
        return(
            <Router>
                <div>
                    <h3>动态路由</h3>
                    {
                        this.state.arr.map((value,key)=>{
                            return (
                                <li key={key}>
                                    <Link to={`/content/${value.aid}`}>{value.title}</Link> //对应着动态路由传参
                                </li>
                            )
                        })
                    }
                    <Route path="/content/:aid" component={Content}></Route>  //动态路由传值path要照着这个格式写，将参数名/:name以这种格式填写 （跳转的路由界面内容显示处）
                    <hr/>
                    <br/>
                    <h3>get方式传值</h3>
                    {
                        this.state.arr.map((value,key)=>{
                            return (
                                <li key={key}>
                                    <Link to={`/gettvalue?aid=${value.aid}`}>{value.title}</Link> // 类似a标签带参数跳转即可
                                </li>
                            )
                        })
                    }
                    <Route path="/gettvalue" component={GetTvalue}></Route>
                </div>
            </Router>
        )
    }
}
export default RouterPage

在对应跳转页面参数值

 //生命周期函数
    componentDidMount() {
        console.log(this.props.location.search) // get方式时取值，取出来的时?aid=1这种格式，需手动转或者引入url模块，进行路由解析
        console.log(this.props.match.params.aid); // 动态路由方式时取值
    }