本案例用的是create-react-app脚手架生产的demo,在创建好后需要安装history模块和prop-types模块。
npm install history --save
npm install prop-types
history主要是需要来制作前进后退相关的步骤,而prop-types则是基本的类型检查。
安装以上两个模块后就开始制作react的路由。
首先,路由最主要的就是url,不管是react还是vue都是一样,在我们点击某个链接的时候,浏览器并没有重新加载页面,而是改变了url,同时,无闪烁的展示我们需要的内容。
首先,声明一个路由对象,来处理url相关的操作。
const Route = ({ path, component }, { location }) => {
const pathname = location.pathname;
if (pathname.match(path)) {
return (
React.createElement(component)
);
} else {
return null;
}
};
在上图中,声明了两个对象,分别有三个参数,是路径,组件,以及一个location,关键步骤就是获取url,然后进行匹配,如果点击链接的url与获得的url相匹配的话,就创建组件元素。
有了url的变化,还需要有一个link来跳转,现在,创建一