react Router 6+redux

安装路由包

npm react-router-dom

路由的使用

所有路由组件都要放在 哈希路由 <HashRouter>或者 浏览器路由<BrowserRouter>中

以下用哈希路由为例

所有Route都要套在Routes中

path='路由路径'   element={<组件名/>}

App.js

import {HashRouter,Route,Routes} from 'react-router-dom'
import Center from './views/Center'
import Cinema from './views/Cinema'
import Film from './views/Film';
function App() {
  return (
  <HashRouter>
    <Routes>
    <Route path='/film' element={<Film/>}> </Route>
    <Route path='/center' element={<Center/>}> </Route>
    <Route path='/cinema' element={<Cinema/>}> </Route>
    </Routes>
  </HashRouter>
  )}

export default App;

为方便代码阅读 通常在src下新建一个router文件夹并新建一个index.js文件来存放路由

App.js

import {HashRouter} from 'react-router-dom'
import MRouter from './router/MRouter.js';

function App() {
  return (
  <HashRouter>
    <MRouter></MRouter>
  </HashRouter>
  )}

export default App;

 MRouter.js

import {Route,Routes} from 'react-router-dom'
import Center from '../views/Center'
import Cinema from '../views/Cinema'
import Film from '../views/Film';
export default function MRouter() {
  return (
    <Routes>
    <Route path='/film' element={<Film/>}> </Route>
    <Route path='/center' element={<Center/>}> </Route>
    <Route path='/cinema' element={<Cinema/>}> </Route>
    </Routes>
  )
}

Route中的index属性（多用于嵌套路由）   相当于设置默认渲染子路由

<Route index element={<Film/>}> </Route>  此时 index为/  当没有匹配的子路由时，显示Film组件  


<Route path='/film' element={<Film/>}>    此时 index为/film    当没有显示其他子路由是显示Filmchild
    <Route index element={<Filmchild/>}></Route>
</Route>

Navigate 重定向（改变 '/' 指向）

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

Outlet  嵌套子路由 （哪里要渲染子路由放在哪）

import React from 'react'
import { Outlet } from 'react-router'
export default function Film() {
  return (
    <div>
      <Outlet></Outlet>
    </div>
  )
}

    <Route path='/film' element={<Film/>}> 
       <Route index element={<Navigate to='nowplaying'/>}></Route>
       <Route path='nowplaying' element={<Nowplaying/>}> </Route>
       <Route path='comingsoon' element={<Comingsoon/>}> </Route>
    </Route>

Navlink  声明式导航（比Link多了一个高亮功能）

 <NavLink  to='/film'>电影</NavLink>
 <NavLink  to='/Cinema'>影院</NavLink>
 <NavLink  to='/Center'>我的</NavLink>

    当使用的css样式为xx.module.css时想要高亮应对className进行赋值操作
    通过isActive判断是否选中以此来添加属性名完成高亮操作

 <NavLink className={({isActive})=>isActive?`${style.tabactive}`:''} to='/film'>电影</NavLink>

useNavigate 编程式导航  可传递参数（已传递id为例）

const navigate=useNavigate()
  const hand=()=>{
    navigate(`/detil?id=${200}`)
    //query（URLSearch）传参  /detil?id=1000
    //路由传参  /detil/1000
  }
  return (
    <div>
    <button onClick={()=>hand()}>跳转</button>
    </div>
  )

useSearchParams 获取 /detil?id=xx   的值

import { useSearchParams } from 'react-router-dom'  
 const [search,setsearch]=useSearchParams()
  console.log(search.get('id'));

useParams 获取  路由传参 /detil/xx的值

import { useParams } from 'react-router'
const {myid}=useParams()
  console.log(myid);
此时路由应该为
    <Route path='/detil/:myid' element={<Detil></Detil>}></Route>

redux

首先安装redux模块

npm i redux

为方便使用 在src下新建一个redux文件夹 新建一个store.js文件

const renduce=(prevstate={hide:''},action)=>{  因为prevstate未赋值所以可直接进行赋值 
action为传来的参数
  const newstate={...prevstate}   深拷贝 防止修改原属性
  switch(action.type){
    default: return newstate   将newstate返回与prevstate的值进行合并（相同覆盖）
  }
}
const store=createStore(renduce)   新建一个stroe
export default store   导出 store

发布端

import store from '../../redux/store'
 useEffect(()=>{
    store.dispatch({type:'hide'})
    return(()=>{
    store.dispatch({type:'show'})
    })
  })

订阅端

import  store  from './redux/store';
  const [state,setstate]=useState(true)

useEffect(()=>{
    store.subscribe(()=>[
      
      setstate(store.getState().hide) 通过getState来过取数据
    ])
    return(()=>console.log(1))
  })