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

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

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

在App.js中进行配置：

exact是什么？ 

exact 是精确匹配的意思

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

加之后：

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

属性：

to:指向跳转的路由

exact:是否精确匹配

activeClassName:指定选中样式

className:指定样式

 

Switch用法：

为什么要使用他？

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

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

原来：index.js

现在：index.js 和 App.js

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

App.js:

最后回顾：

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