likes
comments
collection
share

React router随手笔记.一

作者站长头像
站长
· 阅读数 43

1.路由也更像是一映射关系。key 对应一个 value,怎么理解这句话呢?

我们都熟悉的a标签是这样的<a href="XXX">页面2</a>

那么路由其实就是这样写<Route key="xxx" value="component">页面2</Route>

其实路由的原理就是操作BOM(浏览器对象)的一个方法,大家不要迷,我们经常使用的Window.alert(“xx”)这其实并不是dom的方法,而是浏览器的方法。

React router随手笔记.一

看到这一大堆方法了吗,这其实都是浏览器对象自带的方法,我们关于路由的方法其实要用到的其实是这个

React router随手笔记.一

这些方法其实操作的是我们浏览器的地址栏,每个方法在使用的时候直接对地址栏里的信息来进行操作

React router随手笔记.一

所以<Route key="xxx" value="component">页面2</Route>这句话更像是这样写<Route path="xxx" component="页面2对应的组件">页面2</Route>

这些封装好的方法底层操作的其实都是BOM的history对象里的方法

在React中我们需要单独引入react-router—dom这个包才可以使用,这个包是facebook官方的包。

React router随手笔记.一

要记住在yarn 或者npm这种包管理工具安装某个依赖的时候,所有字母都是小写的,它识别不出大写字母。

安装以后我们就要在头文件引入这个包里的一些关键组件。

React router随手笔记.一

在这里要说一下,HashRouter可以替换为BrowerRouter这是两种路由方式,前者锚点链接式跳转,兼容性较好。具体区别暂时不需要考虑。

这是锚点HashRouter 有路径前面带有#,而BrowerRouter是不带#的

如果选择的是hashRouter,地址栏中#后面的路径它都会认为是前端资源React router随手笔记.一

带#,并不意味着所有斜杠前面都带个#

React router随手笔记.一

HashRouter as XXX 的意思是ES6模块化语法重命名的方法可以将这个组件重命名为xxx。

假如我们要展示的效果是这样的,根据我在导航栏点击的地址,下面展示区展示不同的组件React router随手笔记.一

具体实现的代码如下HashRouter和BrowerRouter在一个页面里只允许出现一次,且必须包裹住其它路由组件,所以一劳永逸的方法就是包裹在最外层。

React router随手笔记.一

在这里要强调一点,<Link>标签里的 to属性的值并不是我们往常一样如同a标签里的href需要链接到真正文件夹的名字那样,它更像是起了一个语义化的名字一样,我更喜欢把它认为是ID一样,它真正的作用其实是为了和下面的<Router>里的path属性呈现一一对应的关系,你可以随便起名字,那你可能有疑问了。那它怎么知道我要用的组件的路径在哪啊?

React router随手笔记.一

你是否忘记你已经在顶部引入了呢?这里才是你文件的路径

React router随手笔记.一

并且在浏览器里<link>标签最终也是被渲染为a标签,只不过阻止了a标签原生的onclik事件

React router随手笔记.一

三.

我们需要考虑的是,如果我的path出现了相同的值,那么页面会渲染第一个出现的标签,如下图,react就会忽略<Home/>组件的渲染。

React router随手笔记.一

React router随手笔记.一

转载自:https://segmentfault.com/a/1190000041649802
评论
请登录