React開發中使用react-router-dom路由最新版本V5.1.2（二）路由跳轉及傳參

NavLink可以控制菜單高亮
navlink加上activeClassName屬性可以給點擊跳轉的菜單加上個class，然后移除其他link上的class，然后我們可以寫個自定義的樣式
import {NavLink} from "react-router-dom"

<li><NavLink to="/home" activeClassName="selected">Home</NavLink></li>
<li><NavLink to="/about" activeClassName="selected">About</NavLink></li>
<li><NavLink to="/dashboard" activeClassName="selected">Dashboard</NavLink></li>

div ul {
  display: flex;
  justify-content: flex-start;
}
div ul li {
  list-style: none;
  margin-right: 10px;
}
.selected {
  color: green;
}

　　

　也可以直接寫內聯樣式

<NavLink
  to="/Home"
  activeStyle={{
    fontWeight: "bold",
    color: "green"
  }}
>
  Home
</NavLink>

參數傳遞
1.url傳遞
在link標簽的to屬性后面加上/12345

<li><NavLink to="/about/12345" activeClassName="selected">About</NavLink></li>

router里加上key

<Route strict path="/about/:id" component={About}/>

然后在跳轉的頁面里取，下面是About.jsx文件

import React from 'react';
export default class About extends React.Component {
  render() {
    return (
      <div>
        Here is About!
        <div>
          傳過來的值：{this.props.match.params.id}
        </div>
      </div>
    )
  }
}

 url里還可以傳多個參數，但是要繼續用斜杠/拼在后面

<NavLink to="/about/12345/中文可以嗎" activeClassName="selected">About</NavLink>

<Route strict path="/about/:id/:text" component={About}/>

　　然后在文件里取，取值屬性：this.props.match.params

import React from 'react';
export default class About extends React.Component {
  render() {
    return (
      <div>
        Here is About!
        <div>
          傳過來的值：{this.props.match.params.id}
          <br/>
          中文：{this.props.match.params.text}
        </div>
      </div>
    )
  }
}

 

 

 url還可以用問號？拼接參數,下面是Home.jsx文件

取值用this.props.location.search，這也就和js里window.location.search差不多

import React from 'react';
export default class Home extends React.Component {
  render() {
    return (
      <div>
        Here is Home!
        <div>
          問號值：{this.props.location.search}
        </div>
      </div>
    )
  }
}

 

 

 2.對象數據屬性傳遞

 在link里to

<NavLink to={{
                  pathname: "/dashboard",
                  datas: {name: 'jack'}
                }} activeClassName="selected">Dashboard</NavLink>

在dashboard.jsx里打印一下props

import React from 'react';
export default class Dashboard extends React.Component {
  render() {
    console.log('props-->', this.props);
    return (
      <div>
        Here is Dashboard!
        <div>
          你的名字：{this.props.location.datas.name}
        </div>
      </div>
    )
  }
}

3.js來控制路由跳轉

下面我們在home的頁面寫一個button跳轉到dashbord，並動態傳遞對象數據

Home.jsx文件

import React from 'react';
export default class Home extends React.Component {
  goDash=()=>{
    this.props.history.push({pathname:'/dashboard',datas:{name:'jack'}});
  }
  render() {
    return (
      <div>
        Here is Home!
        <div>
          <button onClick={ this.goDash }>去dashboard</button>
        </div>
      </div>
    )
  }
}