React学习笔记（四）：路由

安装react-router-dom路由

首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev

引入路由组件，并创建页面组件

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'element-react';
import 'element-theme-default';
import './index.css';
import { BrowserRouter as Router, Route, Link ,Redirect } from "react-router-dom";

class Main extends React.Component{
    render(){
        return(
            <div>
                <Link to="/">主页</Link>
                <Link to="/tv">电视</Link>
                {this.props.children}
            </div>
        )
    }
}

class Tv extends React.Component{
    render(){
        return(
            <div>
                <Card className="box-card">
                    这里是电视
                </Card>
                {this.props.children}
            </div>
        )
    }
}
ReactDOM.render((
    <Router>
        <Route path="/" component={Main}></Route>
        <Route path="/tv" component={Tv}></Route>  
    </Router>
), document.getElementById('main'));

当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面组件。

重定向路由

<Router>
    <Route path="/" component={Main}></Route>
    <Route path="/tv" component={Tv}></Route>
    <Redirect path="/home" to={{pathname: '/tv'}} />    
</Router>

使用Redirect组件，当地址栏出现/home路径时会重定向到/tv

url传参

<Router>
    ...
    <Route path="/tv/show/:id" component={Show}></Route>  
    ...
</Router>

使用this.props.match.params获取url传过来的参数(id)：

class Show extends React.Component{
    constructor(props){
        super(props)
        console.log(this.props.match.params)
    }
    ...
}