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

xxx

Browse Source
This commit is contained in:
chenxuan
2022-06-19 17:47:11 +08:00
parent ecae5af30f
commit 24730ed38a
12 changed files with 10117 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/route/package-lock.json
Generated
+9947 -861
View File
File diff suppressed because it is too large Load Diff
demo/route/package.json
+3
View File
@@ -6,6 +6,9 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^4.21.3",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"query-string": "^7.1.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
demo/route/read.text
+13 -1
View File
@@ -11,4 +11,16 @@
路由传参
params传参,需要声明接收
serach传参，无需声明接收
state
state
路由模式
replace
push 默认模式
编程式路由
this.props.history.push()
this.props.history.replace()
witchRouter
HashRouter / BrowserRouter
使用哈希路由，路由传值，刷新时值会丢失
demo/route/src/App.js
+6 -1
View File
@@ -1,7 +1,7 @@
/*
* @Author: chenxuan
* @Date: 2022-05-22 21:48:34
* @LastEditTime: 2022-06-05 17:02:05
* @LastEditTime: 2022-06-18 18:21:07
* @LastEditors: chenxuan
*/
import React,{Component} from 'react'
@@ -9,6 +9,8 @@ import {NavLink,Link,Route,Switch,Redirect} from 'react-router-dom'
import About from './components/about'
import Home from './components/home'
import Test from './components/test'
import Test1 from './components/test1'
import Header from "./components/header"
import './components/style.css'
class App extends Component{
render(){
@@ -18,11 +20,14 @@ class App extends Component{
<Link to='/about' children="About"/>
<NavLink to='/home'>Home</NavLink>
<NavLink to='/test/a/b'>Test</NavLink>
<NavLink to='/code'>编程式路由</NavLink>
</div>
<div className='content'>
<Header/>
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Route path="/code" component={Test1}/>
<Route exact={false} path="/test" component={Test}/>
<Redirect to="/home" />
</Switch>
demo/route/src/components/child/code/car.jsx
+21
View File
@@ -0,0 +1,21 @@
/*
* @Author: chenxuan
* @Date: 2022-06-05 16:55:35
* @LastEditTime: 2022-06-12 23:55:03
* @LastEditors: chenxuan
*/
import queryString from 'query-string';
import React,{Component} from 'react'
class Car extends Component{
render(){
let {search}=this.props.location
console.log(queryString.parse(search))
return (
<div>
<h2>this is CAR</h2>
</div>
)
}
}
export default Car
demo/route/src/components/child/code/money.jsx
+20
View File
@@ -0,0 +1,20 @@
/*
* @Author: chenxuan
* @Date: 2022-06-05 16:55:45
* @LastEditTime: 2022-06-15 22:05:46
* @LastEditors: chenxuan
*/
import React,{Component} from 'react'
class Money extends Component{
render(){
console.log(this.props.location.state)
return (
<div>
<h2>this is Money</h2>
</div>
)
}
}
export default Money
demo/route/src/components/child/code/news.jsx
+19
View File
@@ -0,0 +1,19 @@
/*
* @Author: chenxuan
* @Date: 2022-06-05 16:55:28
* @LastEditTime: 2022-06-18 18:16:55
* @LastEditors: chenxuan
*/
import {Component} from 'react'
class New extends Component{
render(){
const {name,id}=this.props.match.params
console.log(name,id)
return(
<div>
<h2>this is New</h2>
</div>
)
}
}
export default New
demo/route/src/components/child/news.jsx
+3 -1
View File
@@ -1,10 +1,11 @@
/*
* @Author: chenxuan
* @Date: 2022-06-05 16:55:28
* @LastEditTime: 2022-06-12 23:12:06
* @LastEditTime: 2022-06-19 17:43:53
* @LastEditors: chenxuan
*/
import React,{Component} from 'react'
import { Button } from 'antd';
class New extends Component{
render(){
const {name,id}=this.props.match.params
@@ -12,6 +13,7 @@ class New extends Component{
return(
<div>
<h2>this is New</h2>
<Button type="primary">Primary Button</Button>
</div>
)
}
demo/route/src/components/header.jsx
+30
View File
@@ -0,0 +1,30 @@
/*
* @Author: chenxuan
* @Date: 2022-06-18 18:14:12
* @LastEditTime: 2022-06-18 18:38:02
* @LastEditors: chenxuan
*/
import { Component } from "react"
import {withRouter} from 'react-router-dom'
class Header extends Component{
back=()=>{
this.props.history.goBack()
}
forward=()=>{
this.props.history.goForward()
}
go=()=>{
this.props.history.go(-2)
}
render(){
return(
<div>
<h1>React route演示案例</h1>
<button onClick={this.back}>前进</button>
<button onClick={this.forward}>后退</button>
<button onClick={this.go}>后退2</button>
</div>
)
}
}
export default withRouter(Header)
demo/route/src/components/home.jsx
+4 -4
View File
@@ -1,7 +1,7 @@
/*
* @Author: chenxuan
* @Date: 2022-05-22 22:25:38
* @LastEditTime: 2022-06-15 23:42:13
* @LastEditTime: 2022-06-18 15:38:36
* @LastEditors: chenxuan
*/
import React,{Component} from 'react'
@@ -15,9 +15,9 @@ class Home extends Component{
<div className='home'>
<h1>this is Home</h1>
<ul className='homeNav'>
<Link to="/home/news/chenxuan/123" children="新闻"/>
<Link to="/home/car/?name=chenxuan&id=123456" children="汽车" />
<Link to={{pathname:'/home/money',state:{name:"陈轩",age:"18岁",sex:"男"}}} children="财经" />
<Link replace={true} to="/home/news/chenxuan/123" children="新闻"/>
<Link replace={true} to="/home/car/?name=chenxuan&id=123456" children="汽车" />
<Link replace={true} to={{pathname:'/home/money',state:{name:"陈轩",age:"18岁",sex:"男"}}} children="财经" />
</ul>
<div className='homeContent'>
<Route path="/home/news/:name/:id" component={New} />
demo/route/src/components/test1.jsx
+45
View File
@@ -0,0 +1,45 @@
/*
* @Author: chenxuan
* @Date: 2022-05-22 22:25:38
* @LastEditTime: 2022-06-18 17:40:19
* @LastEditors: chenxuan
*/
import React,{Component} from 'react'
import {Link, Route,Redirect} from 'react-router-dom'
import Car from './child/code/car'
import New from './child/code/news'
import Money from './child/code/money'
class Home extends Component{
replace1=()=>{
this.props.history.replace("/code/news/chenxuan/123")
}
replace2=()=>{
this.props.history.replace("/code/car/?name=chenxuan&id=123456")
}
replace3=()=>{
this.props.history.replace({pathname:"/code/money",state:{name:"陈轩",age:"18岁",sex:"男"}})
}
push1=()=>{
this.props.history.push("/code/news/chenxuan/123")
}
render(){
return(
<div className='home'>
<h1>this is Home</h1>
<ul className='homeNav'>
<button onClick={this.replace1}>replace-params传参</button>
<button onClick={this.replace2}>replace-search传参</button>
<button onClick={this.replace3}>replace-state传参</button>
<button onClick={this.push1}>push-state传参</button>
</ul>
<div className='homeContent'>
<Route path="/code/news/:name/:id" component={New}/>
<Route path="/code/car" component={Car} />
<Route path="/code/money" component={Money} />
<Redirect to="/code/car" />
</div>
</div>
)
}
}
export default Home
demo/route/src/index.js
+6 -1
View File
@@ -1,7 +1,7 @@
/*
* @Author: chenxuan
* @Date: 2022-05-22 21:48:34
* @LastEditTime: 2022-05-22 23:49:46
* @LastEditTime: 2022-06-19 17:42:51
* @LastEditors: chenxuan
*/
import React from 'react';
@@ -10,12 +10,17 @@ import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'
import 'antd/dist/antd.css';
// import {HashRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
{/* <HashRouter>
<App />
</HashRouter> */}
</React.StrictMode>
);