安装react router后引入所需对象import:
import React from ‘react’;
import {BrowserRouter as Router, Route, Link} from ‘react-router-dom’
简单的路由跳转:
在APP.js里引入组件:
1.路由跳转to的内容第对应的页面跳转
2.route代表了路由界面,path代表路径,component代表路径所对应的界面。
import B from "./components/A"
class App extends Component { render() { return (
<Link to="/b">go to B</Link>
<Route path="/b"component={B}>
</Route>
</Router>
</div>
);
} }
export default App;
switch仅渲染与当前位置匹配的第一个子元素, 需要把/放在后面
class定义组件,this.props 获取件的内容
function定义组件,props 获取父组件传给自组件的内容
重定向 Redirect:写在组件Route中,用render来实现它
编程式导航:
push(’/’)方法跳转到对应页面
go()后退或前进n页
goBack() 后退一页
goForward() 前进一页
阻止跳转 Prompt:
<div>
页面A
{this.props.match.params.id}
{this.props.match.params.name}
<Prompt when={true}message={
(location)=>{
console.log(location)
return("确定要离开当前页面吗??")
}
}></Prompt>
</div>
未完持续。。。。。。。。。 未完持续。。。。。。。。。 未完持续。。。。。。。。。