react react-router-dom6 mobx6整理

react react-router-dom v6 

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);

// 父元素调用子组件间方法

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