react-router（4.2） 路由嵌套传参

1、app.js

import React, { Component } from 'react';

import './App.css';
import {Router , Route ,Switch} from 'react-router-dom'
import history from './history';

import Portal from './components/Portal';

import Login from './system/login'
class App extends Component {
    render() {
        return (
                    <Router  history={history}>
                        <div className="app">
              <Switch>
                            <Route exact={true} path="/" component={Login}  /> //重定向 
                            <Route exact={true} path="/login" component={Login}  />
                            <Route path="/app" component={Portal} />
              </Switch>
                        </div>
                    </Router>


        );
    }
}

export default App;

2 、Portal.js

import React from 'react';
import {Route,Switch} from 'react-router-dom'
import Pro from './Pro';
import Serach from './Serach';
import TopMenu from './../components/TopMenu'
import About from './../components/About';
import Product from './../components/Product';
import Home from './../components/Home';

class Portal extends React.Component {

    render() {

        return (
            <div>
        <TopMenu/>
                <Switch>
          <Route path="/app"  exact={true} component={Pro} />
                    <Route path="/app/product/:id"  component={Pro} />
                    <Route path="/app/search"  component={Serach} />
          <Route path="/app/abc" component={Home}/>
          <Route path="/app/abc1" component={Product}/>
          <Route path="/app/abc2" component={About}/>
                </Switch>
            </div>
        )
    }
}

export default Portal;

3、登录页面路由传参

import React from 'react';

// import history from './../history';
import './../assets/css/login.css'
class Login extends React.Component {
  constructor (){
    super();
    this.state = {
      userName:'',
      passWord:''
    }
  }
  handelParams(e){
    let type = e.target.name;
    let value =  e.target.value;
    this.setState({
        [type]:value
    })

  }
  login(){
   // history.push('/app/product');
    this.props.history.push( '/app/product/'+2  )
  }
  render () {
    return (
        <div className="login">
          <div className="box">
            <input type="text" placeholder='请输入用户名' name='userName' onChange= { this.handelParams.bind(this)}/>
            <input type="text" placeholder='请输入密码'  name='passWord' onChange= { this.handelParams.bind(this)}/>
            <button onClick={ this.login.bind(this)}>登录</button>
          </div>
        </div>
    )
  }
}
export default  Login

4、组件接参数

import React from 'react';

class Pro extends React.Component {
    constructor (props){
        super(props)
    console.log(this.props.match.params);


  }
    render() {
        return (
            <h1>我是pro</h1>
        );
    }
}

export default Pro;

5、history.js

import createHistory from 'history/createBrowserHistory';

export default createHistory();

查看完整代码demo