xxx

demo/route/public/index.html

@@ -1,3 +1,9 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-06-19 19:30:58
+ * @LastEditTime: 2022-08-14 17:27:43
+ * @LastEditors: chenxuan
+-->
 <!DOCTYPE html>
 <html lang="en">
   <head>

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一次，可以提高效率
+
+    <NavLink to='/home'>编程式路由</NavLink>
+    <Route  path="/home" component={Home}/>    
+    <Route  path="/home" component={Test1}/>
+    此时 to同时匹配 home和test1路由组件  使用Switch标签后只匹配第一个
+
+10、exact属性严格匹配  to匹配path
+    <Route  exact={true} path="/test" component={Test}/>   to='/test/a/b'    此时to不能匹配path
+    <Route  exact={false} path="/test" component={Test}/>   to='/test/a/b'    此时可以匹配path
+11、Redict重定向  兜底

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{
       <div>
         <div className='nav'>
               <Link to='/about' children="About"/>
-              <NavLink to='/home'>Home</NavLink>
+              {/* <Link to='/about'>About</Link> */}
+              <NavLink activeClassName='hehe' to='/home'>Home</NavLink>
               <NavLink to='/test/a/b'>Test</NavLink>
               <NavLink to='/code'>编程式路由</NavLink>
         </div>
@@ -26,9 +27,9 @@ class App extends Component{
           <Header/>
           <Switch>
               <Route  path="/about" component={About}/>
-              <Route  path="/home" component={Home}/>
+              <Route  path="/home" component={Home}/>    
               <Route  path="/code" component={Test1}/>
-              <Route  exact={false} path="/test" component={Test}/>
+              <Route  exact={true} path="/test" component={Test}/>
               <Redirect to="/home" />
           </Switch>
         </div>

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'

demo/route/src/components/style.css

@@ -15,6 +15,9 @@
     color: #333;
     text-decoration: none;
 }
+.hehe{
+    color: green!important;
+  }
 .nav .active{
     color: red;
 }