react-router-dom v6和react-redux简单使用

本人已参与「新人创作礼」活动，一起开启掘金创作之路

个人对react-router-dom v6常用的一些小总结，不足之处，希望各位大佬多多给意见

安装依赖

yarn add react-router-dom

import {BrowserRouter,HashRouter,useRoutes} from 'react-router-dom'
export const App = () => {
    const La = () => useRoutes([
        {
            path: '/',
            element: <'组件名'>,
            children: [
                {
                    path: '1',
                    element: <'组件名'>,
                },
                {
                    path: '2',
                     element: <'组件名'>,
                }
            ]
        },
        {
            path: '/o',
             element: <'组件名'>,
        }，
        { 
            path: '*', 
            element: <Navigate to='/' /> 
        },
    ])
    return <BrowserRouter>
        <La />
    </BrowserRouter>
}

BrowserRouter和HashRouter的区别

	BrowserRouter	HashRouter
底层原理	使用的是H5的history API，不兼容IE9及以下版本。	使用的是URL的哈希值。
path表现形式不一样	路径中没有#,例如：localhost:3000/demo/test	路径包含#,例如：localhost:3000/#/demo/test。
刷新后对路由state参数的影响	没有任何影响，因为state保存在history对象中	刷新后会导致路由state参数的丢失

路由传参

传参有两种方法

params传参（参数会暴露在url上）

  const La = () => useRoutes([
        {
            path: '/dao/:id',
            element: <'组件名'>,
         }
    ])

需要在定义路由的时候，事先定义好参数，然后通过useNavigate进行传参

import {useNavigate} from 'react-router-dom'
 const navigate=useNavigate()
   <button onClick={()=>{
        navigate('/w/666')
      }}>跳转</button>

获取参数

import { useParams } from 'react-router-dom';
   const params=useParams()
   React.useEffect(()=>{
        console.log(params)
    },[])

state传参（不需要在设置路由的时候提前定义参数）

import {useNavigate} from 'react-router-dom'
 const navigate=useNavigate()
   <button onClick={()=>{
         navigate('/w',{state:{id:16}})
      }}>跳转</button>

获取参数

import { useLocation } from 'react-router-dom';
 const location=useLocation()
   React.useEffect(()=>{
        console.log(location)
    },[])

重定向

    { 
      path: '*', 
      element: <Navigate to='/' /> //重新跳转到/
   },

路由嵌套（outlst显示子路由的窗口）

{
            path: '/',
            element: <Kao>,
            children: [
                {
                    path: '1',
                    element: <'组件名'>,
                },
                {
                    path: '2',
                     element: <'组件名'>,
                }
            ]
        },
 在kao组件中需要Outlet才能显示嵌套路由的子路由
 import {Outlet} from 'react-router-dom'//父路由展示子路由的位置 
<outlet/>

以上的方法都是使用编程式进行路由的跳转和传参

标签式

  <BrowserRouter>
  <Routes>
    <Route path='/' element={<Bpp/>}/>
    <Route path='/w/:id' element={<Shan/>}/>
    <Route path='/e' element={<Cs/>}/>
  </Routes>
  </BrowserRouter>

Route必须嵌套在Routes之内

路由嵌套（标签）

 <Routes>
        <Route path='/' element={<Bpp />}>
          <Route path='/w/:id' element={<Shan />} />
          <Route path='/e' element={<Cs />} />
        </Route>
      </Routes>

重定向

<Route path='/' element={<Navigate to='/'  />} />

withRouter

当一个非路由组件想使用路由的方法的时候使用

import { withRouter, RouteComponentProps } from "react-router-dom";
interface Props extends RouteComponentProps {//ts使用时候要继承RouteComponentProps
    userid: string
    token: string
}
const TookPagePcs = (props: Props) => {
    ......
}
export const TookPagePc = withRouter(TookPagePcs);

react-redux

yarn add react-redux//安装依赖

简单使用

app.js中

import { Provider } from 'react-redux'
import Count from './counter/ReactReducCounter'	//组件
import store from './redux/basic/store'		//自定义的store
export const app = () => {
  return (
    <Provider store={store}>
      <Count />
    </Provider>
  )
}

ReactReducCounter.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
class Counter extends Component {
  increment = () => {
    this.props.increment()
  }
  decrement = () => {
    this.props.decement()
  }
  render() {
    return (
      <div>
        <div>{this.props.num}</div>
        <button onClick={this.increment}>点我+1</button>
        <button onClick={this.decrement}>点我-1</button>
      </div>
    );
  }
}
function mapStateToProps(state) {//connect的第一个函数，能拿到state，拿数据的
  return {
    num: state.count
  }
}
function mapDispatchToProps(dispatch) {//connect的第二个参数，能拿到dispatch
  return {
    increment() {
      dispatch({
        type: 'increment'
      })
    },
    decrement() {
      dispatch({
        type: 'decrement'
      })
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter)//

import {legacy_createStore as  createStore} from 'redux'
const defaultState={ counter:0 }
let reducers=(state=defaulState, action)=>{
	switch (action.type){
		case "increment" :
		  console.log('increment')
		  return { counter:state.counter+1 }
		case "decrement" :
		   return { counter:state.counter-1 }
		default :
		   return state
	}
} 
const store=createStore(reducers)
export default store

//当有多个reducers的时候，可以使用combineReducers
import {combineReducers} from 'redux'
export const store=combineReducers({reducers,reducers1})