react-router-dom

react-router-dom依赖于react-router,所以安装的时候只需要安装react-router-dom即可。

路由跳转

function App(){
    return (<BrowserRouter>
        <h1><Link to="/home">这是第一个链接</Link></h1>
        <h1><Link to="/my">这是第二个链接</Link></h1>

        <Route path="/home" exact component={Home}></Route>
        <Route path="/my" exact component={My}></Route>
        </BrowserRouter>)
}

function Home(){
    return <div>欢迎进入home页</div>
}

function My(){
    return <div>欢迎进入My页</div>
}
ReactDOM.render(<App/>,document.getElementById("root"));

路由传值方式1

function App(){
    return (<BrowserRouter>
        <h1><Link to="/home/123">这是第一个链接</Link></h1>
        <h1><Link to="/my/456">这是第二个链接</Link></h1>

        <Route path="/home/:homeValue" exact component={Home}></Route>
        <Route path="/my/:myValue" exact component={My}></Route>
    </BrowserRouter>)
}

function Home(props){
    return <div>欢迎进入home页-------{props.match.params.homeValue}</div>
}

function My(props){
    return <div>欢迎进入My页-------{props.match.params.myValue}</div>
}
ReactDOM.render(<App/>,document.getElementById("root"));

路由传值方式2

var query1 = {
    pathname: '/home',
    homeVlaue: '我是通过query传值3'
}
var query2 = {
    pathname: '/my',
    myValue: '我是通过query传值4'
}
function App(){
    return (<BrowserRouter>
        <h1><Link to={query1}>这是第一个链接</Link></h1>
        <h1><Link to={query2}>这是第二个链接</Link></h1>

        <Route path="/home" exact component={Home}></Route>
        <Route path="/my" exact component={My}></Route>
    </BrowserRouter>)
}

function Home(props){
    return <div>欢迎进入home页-------{props.location.homeVlaue}</div>
}


function My(props){
    return <div>欢迎进入My页-------{props.location.myValue}</div>
}
ReactDOM.render(<App/>,document.getElementById("root"));

标签重定向

function App(){
    return (<BrowserRouter>
        <Redirect to="/my"></Redirect>
        <h1><Link to={query1}>这是第一个链接</Link></h1>
        <h1><Link to={query2}>这是第二个链接</Link></h1>

        <Route path="/home" exact component={Home}></Route>
        <Route path="/my" exact component={My}></Route>
    </BrowserRouter>)
}

编程重定向

在组件中使用如下语法：this.props.history.push('/my/')