1.react配置react-router 4.x（粗略版，第一次配置，需优化）

最新推荐文章于 2023-08-08 21:59:02 发布

山川pro

最新推荐文章于 2023-08-08 21:59:02 发布

阅读量401

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/rrrrrdong/article/details/122238690

版权

React Router 异步组件路由配置性能优化动态加载

关键词由CSDN通过智能技术生成

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

安装4.x版本路由

npm install react-router-dom@4.3.1 --save

创建一个异步组件AsyncComponent

import React from 'react';
export default function (componentFactory) {
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {component: null};
    }
    shouldComponentUpdate(nextProps, nextState){
        return !!nextState.component // 防止组件被重新挂载
    }
    async componentDidMount() {
      let {default: component} = await componentFactory();
      this.setState({component});
    }
    
    render() {
      let Comp = this.state.component;
      return Comp ? <Comp {...this.props}/> : null;
    }
  }
  return AsyncComponent;
}

将组件导入route.js

import React from 'react'
import { Route, Switch } from "react-router-dom"
import asyncComponent from '../util/AsyncComponent'

const Login  = asyncComponent( () => import('../pages/login/login'))
const Test = asyncComponent(() => import('../components/test1/test1'))
const Test2 = asyncComponent(() => import('../components/test1/test2'))

export default ({ childProps }) =>
  <Switch>
    <Route
      path="/"
      exact
      component={Test}
      props={childProps}
    />
    <Route
      path="/test"
      exact
      component={Test2}
      props={childProps}
    />
    <Route
      path="/login"
      exact
      component={Login}
      props={childProps}
    />
  </Switch>;

封装app.js根组件，并引入route.js

import React, { Component } from "react";
import {  withRouter } from "react-router-dom";
import Routes from "./router";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: false,
      isAuthenticating: true
    };
  }
  render() {
    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated
    };
    return (
        <Routes childProps={childProps} />
    );
  }
}
export default withRouter(App);

在入口文件index.js中引入根组件

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import App from './App';

ReactDOM.render(
  <BrowserRouter><App/></BrowserRouter>, 
  document.getElementById('root')
);