react全家桶

250 阅读1分钟

安装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>

未完持续。。。。。。。。。 未完持续。。。。。。。。。 未完持续。。。。。。。。。