一、 案例效果

ps: 根据不同的路由切换，获取导航标题

二、配置redux

1. npm install redux react-redux @types/react-redux redux-devtools-extension redux-thunk
2. npm install react-intl --save （国际化，可选）
3. index.tsx 中引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import { IntlProvider } from 'react-intl';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from "react-redux";
import reportWebVitals from './reportWebVitals';
import './index.css';
import Routers from './router';
import store from "./store";
import enUS from './lang/en_US';
import App from './App';

const langMap = {
  en: enUS,
};

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  
    
      
        
          
            
          
        

      
    
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

三、文件准备

四、代码案例

1. html下的操作

src/components/header/index.tsx

import { injectIntl } from 'react-intl';
import { useSelector } from 'react-redux'
import { rootState } from '../../store'
import './header.scss';

const Header = function InitHeader(props: any) {
  const { intl } = props;
  const home = intl.formatMessage({ id: 'intl.home' });
  const { headerInfo } = useSelector((state: rootState) => state.storeData)
  return (
    

      

        
{headerInfo.title || home}
      

      


      
    
  );
};

export default injectIntl(Header);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2. store文件夹下的操作

store/index.tsx

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reducers from "./reducer";
export type rootState = ReturnType
const store = createStore(reducers, composeWithDevTools(applyMiddleware()))
export default store
1
2
3
4
5
6

store/reducer/index.tsx

import { combineReducers } from "redux";
import storeData from "./storeData";

export default combineReducers({storeData})
1
2
3
4

store/reducer/storeData.tsx

export interface IState {
  headerInfo: {
    title: string,
  }
} 
const initState: IState = {
  headerInfo: {
    title: '',
  }
}
export enum ActionType {
  INIT,
  HEADER_INFO,
}
const storeData = (state:IState = initState, action: { type: ActionType, payload: any }) => {
  switch (action.type) {
    case ActionType.INIT:
      console.log('state', state)
      return state
    case ActionType.HEADER_INFO:
      return {...state, ...action.payload}
    default:
      return state
  }
}
export default storeData;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3. 点击改变导航标题(side侧边导航下的操作)

import React, { useState, useEffect } from 'react';
import { injectIntl } from 'react-intl';
import headerIcon from '../../assets/img/header_icon.png';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { ActionType } from '../../store/reducer/storeData'
import './index.scss';

const SideBox: React.FC = (props:any) => {
  const { intl } = props;
  const cloudCommunicator = intl.formatMessage({ id: 'intl.cloud-communicator' });
  const dataBuffering = intl.formatMessage({ id: 'intl.data-buffering' });
  const mqttBroker = intl.formatMessage({ id: 'intl.mqtt-broker' });
  const dataConnectors = intl.formatMessage({ id: 'intl.data-connectors' });
  const osiPiAf = intl.formatMessage({ id: 'intl.osi-pi-af' });

  const items: MenuProps['items'] = [
    {
      label: (
        

          
        
      ),
      key: cloudCommunicator,
    },
    {
      label: (
        

          
        
      ),
      key: dataBuffering,
    },
    {
      label: (
        

          
        
      ),
      key: mqttBroker,
    },
    {
      label: (
        

          
        
      ),
      key: dataConnectors,
    },
    {
      label: (
        

          
        
      ),
      key: osiPiAf,
    },
  ];

  const [current, setCurrent] = useState('mail');
  const navigate = useNavigate();
  const dispatch = useDispatch()

  
  const onClick: MenuProps['onClick'] = e => {
    console.log('click ', e);
    dispatch({
      type: ActionType.HEADER_INFO,
      payload: { headerInfo: { title: e.key  } }
    })

    navigate(`/${e.key.toLowerCase().replace(/\s+/g,"")}`)
    setCurrent(e.key);
  };

  useEffect(() => {
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    

      

        

          
        
      
      ;
    
  );
};
export default injectIntl(SideBox);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

4. router下的操作

router/index.tsx

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

const Home = lazy(() => import('../page/home/home'));
const CloudCommunicator = lazy(() => import('../page/cloudCommunicator/cloudCommunicator'));
const DataConnectors = lazy(() => import('../page/dataConnectors/dataConnectors'));

const Routers = () => {
  return 
    
      } />
      } />
      } />
    
  
}

export default Routers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18