chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
chenxuan
2024-04-25 17:23:19 +08:00
parent d75d3323e1
commit 706594af55
11 changed files with 108 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chenxuan1/src/App.js
+2 -10
View File
@@ -13,13 +13,13 @@ import elementArr from './router/element';
export default function App(){
function activeClassName({isActive}){
return isActive ? 'active2' : ''
return isActive ? 'active1' : ''
}
const element=useRoutes(elementArr)
return(
<div className='mainContainer'>
<div className='nav'>
<NavLink to='/jsx' className="active1" children="jsx语法"></NavLink>
<NavLink to='/jsx' className={activeClassName} 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>
@@ -33,14 +33,6 @@ export default function App(){
<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>
<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/>
chenxuan1/src/pages/antd/index.jsx
+21 -14
View File
@@ -1,27 +1,34 @@
import React from 'react';
import {Routes,Route,NavLink} from 'react-router-dom';
import Button from './buttons';
import Input from './input';
import Table from './table';
import {Routes,Route,NavLink,Outlet} from 'react-router-dom';
// import Button from './buttons';
// import Input from './input';
// import Table from './table';
import './style.scss';
class Antd extends React.Component {
render() {
export default function Antd(){
function activeClassName({isActive}){
return isActive ? 'active1' : ''
}
return (
<div className='antd'>
<div className='nav'>
<NavLink replace={true} to="/antd/button" children="Button"/>
<NavLink replace={true} to="/antd/input" children="Input"/>
<NavLink replace={true} to="/antd/table" children="Table"/>
{/* <NavLink to="/antd/button" children="Button"/>
<NavLink to="/antd/input" children="Input"/>
<NavLink to="/antd/table" children="Table"/> */}
<NavLink className={activeClassName} to="button" children="Button"/>
<NavLink className={activeClassName} to="input" children="Input"/>
<NavLink className={activeClassName} to="table" children="Table"/>
<NavLink className={activeClassName} to="search?id=111&name=chenxuan&sex=男&age=18" children="Search"/>
<NavLink className={activeClassName} to="params/1/chenxuan" children="Params"/>
<NavLink className={activeClassName} to="state" state={{id:1,name:"chenxuan",sex:"男",age:"18"}} children="state"/>
</div>
<div className='content'>
<Routes>
{/* <Routes>
<Route exact path='/button' element={<Button/>} />
<Route exact path='/input' element={<Input/>} />
<Route exact path='/table' element={<Table/>} />
</Routes>
</Routes> */}
<Outlet></Outlet>
</div>
</div>
);
}
}
export default Antd;
}
chenxuan1/src/pages/antd/params.jsx
+14
View File
@@ -0,0 +1,14 @@
import React from 'react';
import { useParams,useMatch} from 'react-router-dom';
export default function Test(){
let {id,name}=useParams();
let a=useMatch('/antd/params/:id/:name');
console.log(a.params);
return (
<div className='items'>
<h1>params传参</h1>
<h2>ID：{id}</h2>
<h2>Name：{name}</h2>
</div>
)
}
chenxuan1/src/pages/antd/search.jsx
+20
View File
@@ -0,0 +1,20 @@
import { useSearchParams,useLocation} from "react-router-dom"
export default function Search(){
const [search] = useSearchParams()
const id=search.get('id')
const name=search.get('name')
const age=search.get('age')
const sex=search.get('sex')
const a=useLocation()
console.log(a.search)
return (
<div>
<h1>Search传参</h1>
<h3>ID：{id}</h3>
<h3>Name：{name}</h3>
<h3>Age：{age}</h3>
<h3>Sex：{sex}</h3>
<hr />
</div>
)
}
chenxuan1/src/pages/antd/state.jsx
+13
View File
@@ -0,0 +1,13 @@
import {useLocation} from 'react-router-dom'
export default function State(){
const {id,name,age,sex}=useLocation().state
return (
<div>
<h1>State传参</h1>
<h2>ID:{id}</h2>
<h2>Name:{name}</h2>
<h2>Age:{age}</h2>
<h2>Sex:{sex}</h2>
</div>
)
}
chenxuan1/src/pages/dist/style.css
Vendored
-4
View File
@@ -30,10 +30,6 @@
color: #555;
}
.mainContainer .nav .active1 {
color: red;
font-weight: bold;
}
.mainContainer .nav .active2 {
color: orange;
font-weight: bold;
}
chenxuan1/src/pages/style.css
-5
View File
@@ -34,11 +34,6 @@
}
.mainContainer .nav .active1 {
color: red;
font-weight: bold;
}
.mainContainer .nav .active2 {
color: orange;
font-weight: bold;
}
chenxuan1/src/pages/style.min.css
Vendored
+1 -1
View File
@@ -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;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}
.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: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}
chenxuan1/src/pages/style.scss
-4
View File
@@ -30,10 +30,6 @@
color: #555;
}
.active1{
color: red;
font-weight: bold;
}
.active2{
color: orange;
font-weight: bold;
}
chenxuan1/src/router/element.jsx
+30 -2
View File
@@ -14,6 +14,12 @@ import Github from "../pages/github"
import Todo from "../pages/todo"
import Toast from "../pages/toast"
import Antd from "../pages/antd/index"
import Button from '../pages/antd/buttons'
import Input from '../pages/antd/input'
import Table from '../pages/antd/table'
import Params from '../pages/antd/params'
import Search from '../pages/antd/search'
import State from '../pages/antd/state'
const elementArr=[
{
path: "/jsx",
@@ -72,8 +78,30 @@ const elementArr=[
element: <Todo/>
},
{
path: "/antd/*",
element: <Antd/>
path: "/antd",
element: <Antd/>,
children:[
{
path: "button",
element: <Button/>
},
{
path: "input",
element: <Input/>
},{
path: "table",
element: <Table/>
},{
path: "search",
element: <Search/>
},{
path: "params/:id/:name",
element: <Params/>
},{
path: "state",
element: <State/>
}
]
}
]
export default elementArr
chenxuan1/src/router/read.text
+7 -1
View File
@@ -3,4 +3,10 @@
3、<Routes/>
4、重定向
<Route path="/" element={<Navigate to="/jsx"/>} />
useNavigate 函数
useNavigate 函数
5、嵌套路由
end 属性
<OutLet/>
6、路由传参
params传参 useParams useMatch
search传参 useSearchParams useLocation