React:react-router-dom 使用

1. react-router 与 react-router-dom区别

react-router与react-router-dom使用时的区别

2. 示例

安装:

首先进入项目目录,使用npm安装react-router-dom:

npm install react-router-dom --save-dev

基础使用:

React:react-router-dom 使用_第1张图片

Class1.js

import React, { Component } from 'react';

class Class1 extends Component {
    render() {
        return (
            <div>
                <h1>Class1</h1>
            </div>
        );
    }
}

export default Class1;

Class2.js

import React, { Component } from 'react';

class Class2 extends Component {
    render() {
        return (
            <div>
                <h1>Class2</h1>
            </div>
        );
    }
}

export default Class2;

App.js

import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Class1 from './components/Class1';
import Class2 from './components/Class2';
function App() {
  return (
    <Router>
      <div className="App">
        <Link to="/class1">class1</Link>
        <br />
        <Link to="/class2">class2</Link>
        <Route path="/class1" component={Class1} />
        <Route path="class2" component={Class2} />
      </div>
    </Router>

  );
}

export default App;

入口文件 index.js

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

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

3. 路由基本组件

  • :使用Html5提供的history API来保持UI和URL的同步
  • :使用URL和hash来保持UI和URL的同步
  • :是react路由中点击切换到哪一个组件的链接
  • :代表了你的路由界面,path代表路径,component代表路径对应的界面。
  • :仅渲染与当前位置匹配的第一个子元素。
  • exact:路由严格匹配模式,例:‘ink’ 与 '/'正常情况下他们是匹配的,严格模式下他们是不匹配的。

4. 嵌套路由

Class1.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';

const Home = () => <h1>home</h1>;
const About = () => <h1>about</h1>

class Class1 extends Component {
    render() {
        return (
            <Router>
                <div>
                    <h1>Class1</h1>
                    <Link to="/class1/">首页</Link>
                    <Link to="/class1/about">关于</Link>
                    <Route exact path="/class1/" component = {Home}/>
                    <Route path="/class1/about" component = {About} /> 
                </div>
            </Router>
        );
    }
}

export default Class1;

5. 路由传参

Class1.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';

const Home = () => <h1>home</h1>;
// const About = (res) => {
//         console.log(res);
//         return 

about

// } const About = ({location, history,match}) => { console.log(match.params.title); return <h1>about</h1> } class Class1 extends Component { render() { return ( <Router> <div> <h1>Class1</h1> <Link to="/class1/">首页</Link> <Link to="/class1/about/i-am-title">关于</Link> <Route exact path="/class1/" component = {Home}/> <Route path="/class1/about/:title" component = {About} /> </div> </Router> ); } } export default Class1;

6. 的渲染方式

  • component:一个React组件。当带有component参数的route匹配成功后,route会返回一个新的元素,其为component参数所对应的React组件。

  • render:一个返回React element的函数。当匹配成功后调用该函数。该过程与传入component参数类似。

  • children:一个返回React element的函数。与上述两个参数不同,无论route是否匹配当前location,其都会被渲染。

重定向 Redirect

Redirect重定向是路由的重定向,应该写在组件Route中,一般使用render来实现它。

import {
    BroserRouter as Router,
    Route,
    Link,
    Redirect
} from 'react-router-dom';
...
<p><Link to='/class1/redirect'>redirect</Link></p>
...
<Route path='/class1/redirect' render={() => (
    	<Redirect to='/class/' />
    )}

自定义链接

const OldSchoolMenuLink = ({label, to, activeOnlyWhenExact}) => (
	<Route 
        path={to}
        children = {({match}) => (
        	<div className={match ? "active" : ""} >
            	{match ? ">" :""}
                <Link to={to}>{label}</Link>
            </div>
        )}
)
//使用
<OldSchoolMenuLink to="/about" label="About" />

7. 编程式导航

react-router提供了一个withRouter组件,withRouter可以包装如何自定义组件,将react-router的history,location,match三个对象传入。无需一级传递react-router的属性,当需要用的router属性的时候,将组件包一层withRouter,就可以拿到需要的路由信息。

const RouterChange = withRouther(({history}) => (
	<div>
    	<button onClick={() => history.push('/class1/')}>跳转</button>
    </div>
))

8. 阻止跳转

import {BrowserRouter as Router, Route, Link, Prompt} from 'react-router-dom';
<Prompt 
    when={this.state.isBlocking}
    message={location => `你确定要离开当前页面跳转至${location.pathname}`}
/>

使用Prompt组件:when为布尔值是否开启验证

message: string 当用户离开当前页面时,设置的提示信息。

<Prompt message='确定要离开?'/>

message:func 当用户离开当前页面时,设置的回调函数

9. NavLink

的一个特定的版本,会在匹配上当前的URL的时候给已经渲染的元素添加上参数。

  • activeClassName(string):设置选中的样式,默认值为active
  • activeStyle(object):当前元素被选中时,为此元素添加样式
  • isActive(func):判断链接是否激活的额外逻辑的功能

学习于

React全家桶之Router学习(一)

React全家桶之Router学习(二)

React全家桶之Router学习(三)

文档

React Router 中文文档

你可能感兴趣的:(React,学习笔记)