在创建好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