React 路由 react-router
React 路由 react-router
准备工作
npm install -g create-react-app yarn //安装命令
create-react-app antd-demo //创建项目
cd antd-demo //进入项目
$ yarn start //运行
npm i -D react-router react-router-dom //添加路由依赖
路由组件
Router是所有路由组件共用的底层接口组件,它是路由规则制定的最外层的容器。
Route路由规则匹配,并显示当前的规则对应的组件。
Link路由跳转的组件
一般来说 Router相当于div,link相当于a标签,Route则根据link的指向路径,来设置匹配的组件。
Router组件针对不同功能和平台对应用:
<BrowserRouter> 浏览器的路由组件
<HashRouter> URL格式为Hash路由组件
<MemoryRouter> 内存路由组件
<NativeRouter> Native的路由组件
<StaticRouter> 地址不改变的静态路由组件
Demo
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// 设置根路由
const BasicExample = () => (
// 根路由标签
<Router basename="/admin" getUserConfirmation={getConfirmation}>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
{/*// 设置跳转的组件*/}
<Route exact path="/" component={Home} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const getConfirmation = (message, callback) => {
const allowTransition = window.confirm(message)
callback(allowTransition)
}
// 设置Home组件
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
// 设置 Topics组件
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
// 设置一个组件,
<Route path={`${match.url}/:topicId`} component={Topic} />
// 设置默认组件
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
// 设置二级组件
const Topic = ({ match }) => {
console.log(match);
return (
<h3>{match.url}</h3>
)
};
export default BasicExample;
basename
basename 属性可以设置根路由 basename="/admin" 根路由就为admin
后面的link 则会自动在前面加上admin 如admin/topics
forceRefresh: bool
当设置为 true 时,在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时,才设置为 true。
当设置为 true 时,在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时,才设置为 true。
Link组件
to
需要跳转到的路径(pathname)或地址(location)。
replace: bool
当设置为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址。
当设置为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。
默认为 false。
exact: bool
此属性要求location完全匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配。
如:配置exact的Home正常访问
当在后面加了个1就无法 访问了
没有配置exact的topics正常访问
在后面加东西也能正常访问
Route组件
Route应该是react-route中最重要的组件了,它的作用是当location与Route的path匹配时渲染Route中的Component。
如果有多个Route匹配,那么这些Route的Component都会被渲染。
与Link类似,Route也有一个exact属性,作用也是要求location与Route的path绝对匹配。