diff --git a/chenxuan1/src/App.js b/chenxuan1/src/App.js
index a6ea6db25..fa0453fa0 100644
--- a/chenxuan1/src/App.js
+++ b/chenxuan1/src/App.js
@@ -5,29 +5,34 @@
  * @LastEditors: chenxuan
  */
 import React,{Component} from 'react'
-import {NavLink,Route,Routes,Navigate} from 'react-router-dom'
+import {NavLink,Route,Routes,Navigate,useRoutes} from 'react-router-dom'
 import routes from './router';
 import Head from "./pages/head"
 import  './pages/style.scss'
-class App extends Component{
-  render(){
+import elementArr from './router/element';
+
+export default function App(){
+    function activeClassName({isActive}){
+      return isActive ? 'active2' : ''
+    }
+    const element=useRoutes(elementArr)
     return(
       <div className='mainContainer'>
         <div className='nav'>
-              <NavLink  to='/jsx' activeclassname='active'  children="jsx语法"></NavLink>
-              <NavLink  to='/fn' activeclassname='active'  children="函数式组件"></NavLink>
-              <NavLink  to='/map' activeclassname='active'  children="map循环"></NavLink>
-              <NavLink to='/props'>props</NavLink>
-              <NavLink to='/ref1'>ref-字符串</NavLink>
-              <NavLink to='/ref2'>ref-内联函数</NavLink>
-              <NavLink to='/ref3'>ref-函数</NavLink>
-              <NavLink to='/ref4'>createRef</NavLink>
-              <NavLink to='/life'>生命周期函数</NavLink> 
-              <NavLink to='/github'>github搜索demo</NavLink> 
-              <NavLink to='/todo'>Todo</NavLink>
-              <NavLink to='/toast'>Toast</NavLink>
-              <NavLink to='/hoc1'>高阶组件1</NavLink>
-              <NavLink to='/antd'>Ant Design</NavLink>
+              <NavLink  to='/jsx' className="active1" children="jsx语法"></NavLink>
+              <NavLink  to='/fn'  className={activeClassName}  children="函数式组件"></NavLink>
+              <NavLink  to='/map' className={activeClassName} children="map循环"></NavLink>
+              <NavLink to='/props' className={activeClassName}>props</NavLink>
+              <NavLink to='/ref1' className={activeClassName}>ref-字符串</NavLink>
+              <NavLink to='/ref2' className={activeClassName}>ref-内联函数</NavLink>
+              <NavLink to='/ref3' className={activeClassName}>ref-函数</NavLink>
+              <NavLink to='/ref4' className={activeClassName}>createRef</NavLink>
+              <NavLink to='/life' className={activeClassName}>生命周期函数</NavLink> 
+              <NavLink to='/github' className={activeClassName}>github搜索demo</NavLink> 
+              <NavLink to='/todo' className={activeClassName}>Todo</NavLink>
+              <NavLink to='/toast' className={activeClassName}>Toast</NavLink>
+              <NavLink to='/hoc1' className={activeClassName}>高阶组件1</NavLink>
+              <NavLink to='/antd' className={activeClassName}>Ant Design</NavLink>
               {/* <NavLink to='/life'>高阶组件2</NavLink>
               <NavLink to='/life'>高阶组件3</NavLink>
               <NavLink to='/life'>轮播1</NavLink>
@@ -39,7 +44,7 @@ class App extends Component{
         </div>
         <div className='content'>
           <Head/>
-          <Routes>
+          {/* <Routes>
             {routes.map((item, index) => {
               return (
                 <Route
@@ -51,11 +56,10 @@ class App extends Component{
               );
             })}
             <Route path="/" element={<Navigate to="/jsx"/>}></Route>
-          </Routes>
+          </Routes> */}
+          {element}
          
         </div>
       </div>
     )
-  }
 }
-export default App;
diff --git a/chenxuan1/src/pages/dist/style.css b/chenxuan1/src/pages/dist/style.css
index 03a2d54f6..da9518990 100644
--- a/chenxuan1/src/pages/dist/style.css
+++ b/chenxuan1/src/pages/dist/style.css
@@ -25,12 +25,18 @@
   text-decoration: none;
   display: inline-block;
   height: 40px;
+  font-weight: bold;
   line-height: 40px;
+  color: #555;
 }
-.mainContainer .nav .active {
+.mainContainer .nav .active1 {
   color: red;
   font-weight: bold;
 }
+.mainContainer .nav .active2 {
+  color: orange;
+  font-weight: bold;
+}
 .mainContainer .content {
   margin-left: 210px;
 }
diff --git a/chenxuan1/src/pages/style.css b/chenxuan1/src/pages/style.css
index a816f664d..5e9e633ed 100644
--- a/chenxuan1/src/pages/style.css
+++ b/chenxuan1/src/pages/style.css
@@ -28,14 +28,21 @@
   text-decoration: none;
   display: inline-block;
   height: 40px;
+  font-weight: bold;
   line-height: 40px;
+  color: #555;
 }
 
-.mainContainer .nav .active {
+.mainContainer .nav .active1 {
   color: red;
   font-weight: bold;
 }
 
+.mainContainer .nav .active2 {
+  color: orange;
+  font-weight: bold;
+}
+
 .mainContainer .content {
   margin-left: 210px;
 }
diff --git a/chenxuan1/src/pages/style.min.css b/chenxuan1/src/pages/style.min.css
index 76c7e6a79..c394470b8 100644
--- a/chenxuan1/src/pages/style.min.css
+++ b/chenxuan1/src/pages/style.min.css
@@ -1 +1 @@
-.mainContainer p{margin:0;padding:0}.mainContainer li{margin:0;padding:0;list-style:none}.mainContainer .nav{box-sizing:border-box;float:left;width:200px;height:100vh;padding:12px;border-right:1px solid #eee;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow-y:auto;overflow-x:hidden}.mainContainer .nav a{text-decoration:none;display:inline-block;height:40px;line-height:40px}.mainContainer .nav .active{color:red;font-weight:bold}.mainContainer .content{margin-left:210px}.mainContainer .content .head{box-sizing:border-box;padding-bottom:12px;border-bottom:1px solid #eee}.mainContainer .content .head button{margin-right:12px}
+.mainContainer p{margin:0;padding:0}.mainContainer li{margin:0;padding:0;list-style:none}.mainContainer .nav{box-sizing:border-box;float:left;width:200px;height:100vh;padding:12px;border-right:1px solid #eee;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow-y:auto;overflow-x:hidden}.mainContainer .nav a{text-decoration:none;display:inline-block;height:40px;font-weight:bold;line-height:40px;color:#555}.mainContainer .nav .active1{color:red;font-weight:bold}.mainContainer .nav .active2{color:orange;font-weight:bold}.mainContainer .content{margin-left:210px}.mainContainer .content .head{box-sizing:border-box;padding-bottom:12px;border-bottom:1px solid #eee}.mainContainer .content .head button{margin-right:12px}
diff --git a/chenxuan1/src/pages/style.scss b/chenxuan1/src/pages/style.scss
index bf0377278..a8ce3bacf 100644
--- a/chenxuan1/src/pages/style.scss
+++ b/chenxuan1/src/pages/style.scss
@@ -25,12 +25,18 @@
             text-decoration: none;
             display: inline-block;
             height: 40px;
+            font-weight: bold;
             line-height: 40px;
+            color: #555;
         }
-        .active{
+        .active1{
             color: red;
             font-weight: bold;
         }
+        .active2{
+            color: orange;
+            font-weight: bold;
+        }
 
     }
     .content{
diff --git a/chenxuan1/src/router/element.jsx b/chenxuan1/src/router/element.jsx
new file mode 100644
index 000000000..396c0788f
--- /dev/null
+++ b/chenxuan1/src/router/element.jsx
@@ -0,0 +1,79 @@
+import {useRoutes} from 'react-router-dom'
+import Jsx from '../pages/jsx'
+import Fn from '../pages/fn'
+import Map from '../pages/map'
+import Props from "../pages/props"
+import Ref1 from "../pages/ref1"
+import Ref2 from "../pages/ref2"
+import Ref3 from "../pages/ref3"
+import Ref4 from "../pages/ref4"
+import This from "../pages/this"
+import Life from "../pages/life"
+import Hoc1 from "../pages/hoc1"
+import Github from "../pages/github"
+import Todo from "../pages/todo"
+import Toast from "../pages/toast"
+import Antd from "../pages/antd/index"
+const elementArr=[
+    {
+        path: "/jsx",
+        element: <Jsx/>
+      },
+      {
+        path: "/fn",
+        element: <Fn/>
+      },
+      {
+        path: "/map",
+        element: <Map/>
+      },
+      {
+        path: "/props",
+        element: <Props/>
+      },
+      {
+        path: "/hoc1",
+        element: <Hoc1/>
+      },
+      {
+        path: "/life",
+        element:<Life/>
+      },
+      {
+        path: "/ref1",
+        element: <Ref1/>
+      },
+      {
+        path: "/ref2",
+        element: <Ref2/>
+      },
+      {
+        path: "/ref3",
+        element: <Ref3/>
+      },
+      {
+        path: "/ref4",
+        element: <Ref4/>
+      },
+      {
+          path: "/this",
+          element: <This/>
+      },
+      {
+          path: "/github",
+          element: <Github/>
+      },
+      {
+        path: "/toast",
+        element: <Toast/>
+      },
+      {
+        path: "/todo",
+        element: <Todo/>
+      },
+      {
+        path: "/antd/*",
+        element: <Antd/>
+      }  
+]
+export default elementArr
\ No newline at end of file