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();