[react] 简单的路由跳转配置（显示传参）

彩蛋：后台管理系统一站式平台模板

vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0

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>
        )
    }
}

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

export default class Router extends React.Component {
    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}>
                                    <NavLink exact to={item.path} activeClassName="activeted">{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、目录结构