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 (
                    
                        
"app">
              
                            true} path="/" component={Login}  /> //重定向 
                            true} path="/login" component={Login}  />
                            "/app" component={Portal} />
              
                        
                    


        );
    }
}

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 (
            

        
                
          "/app"  exact={
    true} component={Pro} />
                    "/app/product/:id"  component={Pro} />
                    "/app/search"  component={Serach} />
          "/app/abc" component={Home}/>
          "/app/abc1" component={Product}/>
          "/app/abc2" component={About}/>
                
            
        )
    }
}

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 (
        
"login">
          
"box">
            type="text" placeholder='请输入用户名' name='userName' onChange= { this.handelParams.bind(this)}/>
            type="text" placeholder='请输入密码'  name='passWord' onChange= { this.handelParams.bind(this)}/>
            this.login.bind(this)}>登录
          
        
    )
  }
}
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 (
            
我是pro
        );
    }
}

export default Pro;

5、history.js

import createHistory from 'history/createBrowserHistory';

export default createHistory();

查看完整代码demo