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
基础使用：
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. 路由基本组件
：是react路由中点击切换到哪一个组件的链接- 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 中文文档