preface

Then, the last one talked about the simple qiankun instance and the use of vue sub-application, so this one will practice the use of react sub-application, sub-application independent running, and sub-application routing jump, step by step practice

A. Prepare

NPM I create-react-app -g

2. Create projects

The react sub-app was created under the same directory as the main app. The name of the sub-app was qiankun-testchild2, and the upper scaffolding was used to build create-React -app qiankun-testchild2

3. Transform sub-applications. The last article talked about the transformation of sub-applications, so the React project is similar.

First, change the root ID of the index. HTML file in public

In React, you need to install two dependencies to modify the webPack configuration without eJEC

npm install react-app-rewired customize-cra --save-dev
Copy the code

5. After the installation, create a config-overrides. Js file in the root directory of the subapplication, which is used to configure the basic configuration of WebPack

module.exports = { webpack: (config) => { config.output.library = 'qiankun-testchild2' config.output.libraryTarget = 'umd' config.output.publicPath = 'http://localhost:9726' return config }, devServer: Return function(proxy, allowedHost) {const config = configFunction(proxy, const config) Config. Headers = {' access-control-allow-origin ': // headers = {' access-control-allow-origin ': '*' } return config } } }Copy the code

Env file. This file reads the port by default. In this file, define the port definition.

 PORT=9726
  WDS_SOCKET_PORT=9726
Copy the code

7. After writing the WebPack configuration, you need to modify package.json because you use react-app-rewired

     "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
Copy the code

8. After all these are configured, we need to modify index.js, also need shared folder, to keep access to the master application data communication, and then sub application qinakun three life cycle. And the ability to distinguish between running independently and running sub-applications, directly on the code

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import actions from ".. /src/shared/action"; // import reportWebVitals from './reportWebVitals'; Function render(props={}) {if (props) {// Add actions. SetActions (props); } const { container } = props; ReactDOM.render(<App />, container ? container.querySelector('#app3') : document.getElementById('app3')); } if (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line no-undef __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } if(! Window.__powered_by_qiankun__) {console.log('123123') // Render ()} export async function bootstrap(props) { console.log('react app bootstraped'); } export async function mount(props) { render(props) } export async function unmount(props) { ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#app3') : document.getElementById('app3')); }Copy the code

9. Index.js uses action, which, like the Vue subapp, can copy folders directly from it. Of course, if the type of global interaction data is different later on, some methods of modifying the property need to be set up separately internally.

10. Index.js, app.js, DOM completion: ComponentDidMount () componentDidMount () state ();

React usage and syntax:Juejin. Cn/post / 684490…

The code is as follows:

import './App.css'; import actions from "./shared/action"; import React, { Component } from 'react'; class App extends Component { state = { msg: } componentDidMount () {// Facilitate independent startup if (window. __POWERED_BY_QIANKUN__) {actions. OnGlobalStateChange (state = > {const {token} = state; This.setstate ({MSG: token})}, true); } render () {return (<div className="App"> <header className=" app-header "> ); } } export default App;Copy the code

11. The reason for adding a judgment to componentDidMount is that if it starts independently, actions will not be registered, thus avoiding the problem of not finding actions when starting independently.

12. Then, after the subapplication is finished, it is necessary to register the main application. That is, add the subapplication to the main application’s apps array.

    
    let apps = [
      {
        name: "qiankun-testchild1",
        entry: '//localhost:9725', 
        container: "#subapp",
        activeRule: "/qiankun-testchild1",
        props: {
          name: "kuitos"
        }
      },
      {
        name: "qiankun-testchild2",
        entry: '//localhost:9726', 
        container: "#subapp",
        activeRule: "/qiankun-testchild2",
        props: {
          name: "kuitos"
        }
      }
    ]
Copy the code

13. Then you can launch to see the combined effect and the single effect.

React/VUE/React/vue/React/VUE So let’s practice, how do we do a route jump in a child application

1. Redirect intra-application routes. The following uses vUE sub-application as an example

A router-view container can be created to redirect routes within a sub-application

Then, add two child pages

Then register the access path in the router file, which needs to handle the problem of repeated hops

You can see above, three red box parts, the first red box to tackle the problem of repeated jump the second red box registered routing, the third red box, base pay special attention to, can change to the current application of routing, so the above routing need not add child application routing, but the child jumps between applications will be the base path problem, well, Below is the operation diagram.

2. Jump between sub-applications,

So this jumps from the React subapp to the Vue subapp. First, we need to wrap the BrowserRouter in our app

Then, in Router4 above, to use the history jump, createBrowserHistory is used as follows. History is not installed

import './App.css'; import actions from "./shared/action"; import { withRouter } from "react-router-dom"; import {createBrowserHistory} from "history"; import React, { Component } from 'react'; class App extends Component { state = { msg: } componentDidMount () {// Facilitate independent startup if (window. __POWERED_BY_QIANKUN__) {actions. OnGlobalStateChange (state = > {const {token} = state; This.setstate ({MSG: token})}, true); } } toChild1() { let history = createBrowserHistory() // console.log(this.history) history.push('/qiankun-testchild1/test1') // history.pushState(null, '/qiankun-testchild1/test1', '/qiankun-testchild1/test1'); } render () {return (<div className="App"> <header className=" app-header" OnClick ={this.tochild1}> </button> </header> </div>); } } export default withRouter(App);Copy the code

Ok, now you can try jumping between sub-applications. The result is shown below

Ok, you can see that the path is correct, but it is not loaded to the next level, so, modify the life cycle of the vue child application, this is because there is no logout

Replace the comments

All right, let’s see what happens

Vue internal hop is normal Switch from vUE to React Switch from react to VUE Click the label again to jump to the online commodity home page, normal

15. Ok, that basically creates two integration sub-applications and solves the problem of jumping between and within sub-applications. In the next article, I will refine these two subapplications, because more subapplications add integration in similar steps, so I will not explain the subsequent subapplications. The main analysis practice application communication this piece.

16. Attached is the project link:Github.com/hejiyun/qia…

conclusion

To invite a full moon qionglou, looking back home is autumn. Ladies and gentlemen, I hope you are still young!