diff --git a/demo/route/public/index.html b/demo/route/public/index.html index aa069f27c..4c154b619 100644 --- a/demo/route/public/index.html +++ b/demo/route/public/index.html @@ -1,3 +1,9 @@ + diff --git a/demo/route/read.text b/demo/route/read.text new file mode 100644 index 000000000..aeefdc684 --- /dev/null +++ b/demo/route/read.text @@ -0,0 +1,19 @@ +1、react-router-dom +2、BrowserRouter HashRouter 标签 +3、路由组件与一般组件的区别 +4、Route标签 路由组件 +5、NavLink标签 高亮效果 +6、activeClassName 自定义高亮路由类名 +7、批量接收props {...this.props} +8、children相当于标签体内容 +9、Switch to只匹配path一次,可以提高效率 + + 编程式路由 + + + 此时 to同时匹配 home和test1路由组件 使用Switch标签后只匹配第一个 + +10、exact属性严格匹配 to匹配path + to='/test/a/b' 此时to不能匹配path + to='/test/a/b' 此时可以匹配path +11、Redict重定向 兜底 \ No newline at end of file diff --git a/demo/route/src/App.js b/demo/route/src/App.js index cfd75d33d..78787654d 100644 --- a/demo/route/src/App.js +++ b/demo/route/src/App.js @@ -1,7 +1,7 @@ /* * @Author: chenxuan * @Date: 2022-05-22 21:48:34 - * @LastEditTime: 2022-06-18 18:21:07 + * @LastEditTime: 2022-08-23 00:41:17 * @LastEditors: chenxuan */ import React,{Component} from 'react' @@ -18,7 +18,8 @@ class App extends Component{
- Home + {/* About */} + Home Test 编程式路由
@@ -26,9 +27,9 @@ class App extends Component{
- + - +
diff --git a/demo/route/src/components/about.jsx b/demo/route/src/components/about.jsx index fdc7a3703..832588742 100644 --- a/demo/route/src/components/about.jsx +++ b/demo/route/src/components/about.jsx @@ -1,7 +1,7 @@ /* * @Author: chenxuan * @Date: 2022-05-22 22:25:25 - * @LastEditTime: 2022-05-22 22:49:46 + * @LastEditTime: 2022-08-14 17:22:05 * @LastEditors: chenxuan */ import React,{Component} from 'react' diff --git a/demo/route/src/components/style.css b/demo/route/src/components/style.css index f3dc77f7d..4b5846bb2 100644 --- a/demo/route/src/components/style.css +++ b/demo/route/src/components/style.css @@ -15,6 +15,9 @@ color: #333; text-decoration: none; } +.hehe{ + color: green!important; + } .nav .active{ color: red; }