一、安装
npm install --save react-router-dom
二、代码实现
1.path='/'默认为首页,否则需填写路径;添加exact表示子页面也可通过路由访问,例如:localhost:3000为首页,localhost:3000/src/Main为主页面,且可通过路由访问。
具体代码如下:
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import Main from './Main';
function App() {
return (
<Router>
<div>
<Route exact path='/' component={Home}/>
<Route path="/src/Main" component={Main}/>
</div>
</Router>
);
}
export default App;
三、跳转
1.Link
<Link to="/src/Main/" style={{color:'black'}}>
<button style={{width:'200px',height:'60px',marginTop:'5px'}} >登录</button>
</Link>
2.js跳转
<button style={{width:'200px',height:'60px',marginTop:'5px'}} onClick={this.login}>登录</button>
login=()=>{
this.props.history.push('/src/Main/')
}