react-router4+ 路由页面跳转

配置脚手架

$ create-react-app

App.js

import React from 'react';
import { BrowserRouter as Router,Route,withRouter,Switch} from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';
class App extends React.Component {
render(){
return(
<Router>
 <div>
<Route exact path="/" component={Home} />
<Route path="/Page1" component={Page1} />
<Route path="/Page2" component={Page2} />
<Route path="/Page3" component={Page3} />
</div>
</Router>
)
}
}
export default App;

Home.js

import React from 'react';
import { Link } from 'react-router-dom';
class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
<div>
<Link to="/Page1/">点击</Link>
</div>
</div>
);
}
}
export default Home;

Page1.js

import React from 'react';
import { Link } from 'react-router-dom';
class Page1 extends React.Component{
render(){ 
return(
<div>
<div className="p1">This is Page1!</div>
<div>
<Link to="/Page2/">点击跳转到Page2</Link>
</div>
</div>
);
}
}
export default Page1;

Page2.js

省略

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));