react react-router-dom6 mobx6整理

react react-router-dom v6

移除了 <NavLink> 的 activeClassName 属性改为：

import { NavLink } from 'react-router-dom';

function App() {

return ( <> {

/* className 写法 */}

<NavLink className={({isActive}) => { return isActive ? "highlight" : ""; }} to="home">Home</NavLink>

{/* style 写法 */}

<NavLink to="about" style={({isActive}) => { return { color: isActive ? "red" : "" } }} >About</NavLink> </> );

}

移除 <Redirect>，改为使用 <Navigate>

// v6 写法

import { Navigate, Route, Routes } from 'react-router-dom';

function App() { return (

   <Routes> <Route path='/' element={<Navigate replace to="/home" />} /> </Routes> );

}

navigate('/home', {replace: true});

 

route/index.js

import React, { Suspense, lazy } from 'react'
import Layout from '../views/Layout/index'
const Home = lazy(() => import('../views/home/index'))
const List = lazy(() => import('../views/list/index'))
const Test = lazy(() => import('../views/test/index'))
const Detail = lazy(() => import('../views/detail/index'))
const lazyLoad = (children) => {
return <Suspense fallback={<div>loading……</div>}>
{children}
</Suspense>
}
const router = [
{
path: "/",
element: <Layout />,
children: [
{
index: true,
element: lazyLoad(<Home />)
},
{
path: 'list/:id',
element: lazyLoad(<List />)
},
{
path: 'detail',
element: lazyLoad(<Detail />)
},
// {
// path: 'detail/:id',
// element: lazyLoad(<Detail />)
// },
{
path: 'test',
element: lazyLoad(<Test />)
}
]
}
];

export default router

app.js
import { useRoutes } from "react-router-dom";
import Router from './route/index'
const App3 = () => {
return useRoutes(Router)
}

export default App3

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import './index.less';
import App from './App3';
import { BrowserRouter } from "react-router-dom";
moment.locale('zh-cn');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ConfigProvider locale={zhCN}>
<BrowserRouter>
<App />
</BrowserRouter>

</ConfigProvider>
);
路由跳转传参
import { useParams, useNavigate, useSearchParams, useLocation } from "react-router-dom";
Navigate('/detail/'+4);
//接受参数 const params = useParams();
Navigate('/detail?age='+39);
//接受参数 const [search] = useSearchParams(); console.log('search', search.get('age'))
Navigate('/detail', {
state: {
id: 6
}
});
// 接受参数 const location = useLocation() console.log('location',location.state.id)；

// mobx6使用
// store/mobx2Test.js
import { action, makeObservable, observable } from "mobx"

export default class CounterStore {
constructor() {
this.count = 0
makeObservable(this, {
count: observable,
// increment: action,
// decrement: action,
increment: action.bound, // bound 改变 组件中 this 指向
decrement: action.bound
})
}
increment() {
this.count += 1
}
decrement() {
this.count -= 1
}
}
// list/list.js
import React, { useEffect, useState } from 'react';

import Counter from './Counter'
import { useParams, useNavigate } from "react-router-dom";
import CounterStore from '../../store/mobx2Test'
const counterStore = new CounterStore();
<Counter store = { counterStore }></Counter>
// list/Counter.js

import { observer } from "mobx-react";

function Counter ({ store }) {
// 改变this指向这样可以写
const { count, increment, decrement } = store;
return (
<div>
<button onClick={ () => increment() }>+</button>
<span>{ count }</span>
<button onClick={ () => decrement() }>-</button>
如果store中没改变this指向用地下这种
{/* <button onClick={ () => store.increment() }>+</button>
<span>{ store.count }</span>
<button onClick={ () => store.decrement() }>-</button> */}
</div>
)
}

export default observer(Counter);

// mobx 全局注入
store/index.js

import { createContext, useContext } from "react"
import CounterStore from "./mobxTest" //里面的内容同store/mobx2Test.js

class RootStore {
constructor() {
this.counterStore = new CounterStore()
}
}
const rootStore = new RootStore()
const RootStoreContext = createContext()

export const RootStoreProvider = ({ children }) => {
return (
<RootStoreContext.Provider value={rootStore}>
{children}
</RootStoreContext.Provider>
)
}

export const useRootStore = () => {
return useContext(RootStoreContext)

}
layout/index.js
import { RootStoreProvider } from "../../store"
<RootStoreProvider>// 放到最外层

</RootStoreProvider>
home/index.js
import { observer } from "mobx-react"
import { useRootStore } from "../../store"

function Counter() {
const { counterStore } = useRootStore()
// counterStore 里面 action.bound,就是为了 使用以下解构属性时 可以正常使用
const { count, increment, decrement } = counterStore
return (
<div>
<button onClick={increment}>
INCREMENT
</button>
<button>{count}</button>
<button onClick={decrement}>
DECREMENT
</button>
</div>
)
}

export default observer(Counter)

// 父元素调用子组件间方法
import { createRef, forwardRef, useRef, useImperativeHandle } from 'react';

const Foo = forwardRef((params, inputRef1) => {
const inputRef = useRef();
// 主要这个useImperativeHandle钩子
useImperativeHandle(inputRef1, () => ({
focus1 () {
console.log(3333333333)
//EEinputRef.current.focus();
}
}));

return <input type="text" ref={ inputRef } />;
});

const App = () => {
const inputRef = useRef();

const onClick = () => {
inputRef.current.focus1();
}

return <div>
<Foo ref={ inputRef } />
<button onClick={ onClick }>button</button>
</div>;
}
export default App

react-router-dom v6 转载https://www.bilibili.com/read/cv18797039