React 路由

安装

cnpm i react-router-dom -S

引用

import {HashRouter,Router,Link} from 'react-router-dom'

app.jsx

import React from 'react'
import {HashRouter,Route,Link} from 'react-router-dom'
import Home from './components/Home'
import Movie from './components/Movie'
import About from './components/About'
export default class App extends React.Component{
    constructor(propos){
        super(propos)
        this.state={}
    }
    render(){
        return <HashRouter>
            <div>
                <h1>
                   首页
                </h1>
                <hr/>
                <Link to="/home">首页</Link>
                <Link to="/movie">电影</Link>
                <Link to="/about">关于</Link>
            </div>
            <Route path="/home" component={Home}></Route>
            <Route path="/movie" component={Movie}></Route>
            <Route path="/about" component={About}></Route>
        </HashRouter> 
    }
}

About.jsx

import React from 'react'

export default class About extends React.Component{
    constructor(propos){
        super(propos)
        this.state={}
    }
    render(){
        return <div>
                about
            </div>
            
       
    }
}

 

路由传参数

movie.jsx

import React from 'react'

export default class Movie extends React.Component{
    constructor(propos){
        super(propos)
        this.state={}
    }
    render(){
        return <div>
                Movie-{this.props.match.params.type}-{this.props.match.params.type}
            </div>
            
       
    }
}

app.jsx

render(){
        return <HashRouter>
            <div>
                <h1>
                   首页
                </h1>
                <hr/>
                <Link to="/home">首页</Link>
                <Link to="/movie/top20/2">电影</Link>
                <Link to="/about">关于</Link>
            </div>
            <Route path="/home" component={Home}></Route>
            <Route path="/movie/:type/:id" component={Movie}></Route>
            <Route path="/about" component={About}></Route>
        </HashRouter> 
    }