react-router与react-router-dom使用时的区别
首先进入项目目录,使用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')
);
:使用Html5提供的history API来保持UI和URL的同步
:使用URL和hash来保持UI和URL的同步
:是react路由中点击切换到哪一个组件的链接
:代表了你的路由界面,path代表路径,component代表路径对应的界面。
:仅渲染与当前位置匹配的第一个子元素。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;
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;
的渲染方式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" />
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>
))
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 当用户离开当前页面时,设置的回调函数
是的一个特定的版本,会在匹配上当前的URL的时候给已经渲染的元素添加上参数。
学习于:
React全家桶之Router学习(一)
React全家桶之Router学习(二)
React全家桶之Router学习(三)
文档:
React Router 中文文档