React入门随记——路由和Switch的用法

时间:2024-03-20 21:47:46

在创建好react-cli脚手架之后,在view文件下创建jsx文件:

React入门随记——路由和Switch的用法

在使用react路由之前,下载路由依赖 : npm(cnpm) install react-router-dom -s

在App.js中进行配置:

React入门随记——路由和Switch的用法

exact是什么? 

exact 是精确匹配的意思

不加exact时,下面路由不管点击谁都没有变,因为都匹配了 /

React入门随记——路由和Switch的用法

加之后:

React入门随记——路由和Switch的用法

样式,默认的选中样式active。如果想更改其它样式名,可以使用activeClassName属性

属性:

to:指向跳转的路由

exact:是否精确匹配

activeClassName:指定选中样式

className:指定样式

 

Switch用法:

为什么要使用他?

因为 每一个被匹配到的<Route>都将会被渲染 ,用<Switch>包裹,只会渲染一个路径

我们对App.js和 index.js 来进行改造:

原来:index.js

React入门随记——路由和Switch的用法

现在:index.js 和 App.js

React入门随记——路由和Switch的用法

因为Router只能在最外层,我们可以直接把它去包裹<App/>

App.js:

React入门随记——路由和Switch的用法

React入门随记——路由和Switch的用法

最后回顾:

Switch只会匹配当前URL, 比如当前是/newtwo ,它只会渲染 newtwo