[react] 簡單的路由跳轉配置（顯示傳參）

1、首先進入項目目錄，使用 cnpm 安裝 cnpm install react-router-dom

2、根目錄 App.js 引入 import {Route, Switch, BrowserRouter} from 'react-router-dom'，相當於路由出口吧，可自定義單獨封裝成一個路由組件。

import React from 'react';
import './App.css';
import Test from "./view/proson"
import Cs from './components/cs'
import RouterNav from './components/router-nav'
import {Route, Switch, BrowserRouter} from 'react-router-dom';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <RouterNav></RouterNav>
        <Switch>
          <Route exact path="/" component={Test}></Route>
          <Route exact path="/cs/:id/:name" component={Cs}></Route>
        </Switch>
      </BrowserRouter>
    )
  }
}

export default App;

關於是使用 HashRouter 還是 BrowserRouter，他們的直觀區別就是：
1、HashRouter

2、BrowserRouter

3、NavLink跳轉方式：引入 import { NavLink } from 'react-router-dom'，如下，即可完成簡單的跳轉

import React from 'react'
import { NavLink } from 'react-router-dom'

class Router extends React.Component {
    render() {
        return (
            <div>
                <ul className="nav">
                    <li><NavLink to="/">Home</NavLink></li>
                    <li><NavLink to="/cs/123456/789">Csasd</NavLink></li>
                </ul>
            </div>
        )
    }
}

export default Router

4、事件跳轉方式（需引入 withRouter ）：引入 import { withRouter } from 'react-router-dom'

import React from 'react'
import { withRouter } from 'react-router-dom'

class Router extends React.Component {
    onCurrenClick(path) {
        this.props.history.push({
            pathname: path
        })
    }
    render() {
        return (
            <div>
                <ul className="nav">
                    <li onClick={() => this.onCurrenClick('/')}>Home</li>
                    <li onClick={() => this.onCurrenClick('/cs/123456/789')}>Csasd</li>
                </ul>
            </div>
        )
    }
}

export default withRouter(Router)

5、高級玩法：

import React from 'react'
import { NavLink } from 'react-router-dom'

export default class Router extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isSelect: 0
        }
    }
    componentDidMount() {
        if (sessionStorage.getItem("navIndex")) {
            this.setState({
                isSelect: Number.parseInt(sessionStorage.getItem("navIndex"))
            });
        }
    }
    onSetCur(index) {
        sessionStorage.setItem('navIndex', index)
        this.setState({
            isSelect: Number.parseInt(index)
        });
    }
    render() {
        let navs = [
            {
                path: "/",
                name: 'Home'
            },
            {
                path: "/cs/123456/789",
                name: 'Csasd'
            }
        ]
        return (
            <div>
                <ul className="nav">
                    {
                        navs.map((item, index) => {
                            return (
                                <li key={index} index={index} className={this.state.isSelect === index ? 'activeted' : ''} onClick={() => this.onSetCur(index)}>
                                    <NavLink to={item.path}>{item.name}</NavLink>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

6、頁面取值（顯示傳參）

import React from 'react'

export default class Cs extends React.Component {
    componentDidMount() {
        console.log(this.props.match)
    }
}

7、目錄結構