62 lines
2.2 KiB
JavaScript
62 lines
2.2 KiB
JavaScript
/*
|
|
* @Author: chenxuan
|
|
* @Date: 2022-05-22 21:48:34
|
|
* @LastEditTime: 2022-08-23 01:06:03
|
|
* @LastEditors: chenxuan
|
|
*/
|
|
import React,{Component} from 'react'
|
|
import {NavLink,Route,Routes,Navigate} from 'react-router-dom'
|
|
import routes from './router';
|
|
import Head from "./pages/head"
|
|
import './pages/style.scss'
|
|
class App extends Component{
|
|
render(){
|
|
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='/life'>高阶组件2</NavLink>
|
|
<NavLink to='/life'>高阶组件3</NavLink>
|
|
<NavLink to='/life'>轮播1</NavLink>
|
|
<NavLink to='/life'>轮播2</NavLink>
|
|
<NavLink to='/life'>高阶组件3</NavLink>
|
|
<NavLink to='/life'>Redux1</NavLink>
|
|
<NavLink to='/life'>Redux2</NavLink>
|
|
<NavLink to='/life'>Redux3</NavLink> */}
|
|
</div>
|
|
<div className='content'>
|
|
<Head/>
|
|
<Routes>
|
|
{routes.map((item, index) => {
|
|
return (
|
|
<Route
|
|
key={index}
|
|
exact
|
|
path={item.path}
|
|
element={<item.component />}
|
|
/>
|
|
);
|
|
})}
|
|
<Route path="/" element={<Navigate to="/jsx"/>}></Route>
|
|
</Routes>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default App;
|