no message
This commit is contained in:
chenxuan
+25
-21
@@ -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;
|
||||
|
||||
Vendored
+7
-1
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Vendored
+1
-1
@@ -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}
|
||||
|
||||
@@ -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{
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user