React路由示例

React路由示例

React路由示例

---

`提示：以下是代码示例。

一、使用

1.引入库

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

import * as React from "react";
import {
    
     Redirect } from 'react-router-dom'

export const routers: Array<any> = [
    {
    
     path: '/', render: () => <Redirect to='/ggg' /> }, //默认路由
    {
    
    
        path: '/text',
        loader: () => import('../text/index')
    },
    {
    
    
        path: '/ebdal',
        loader: () => import('../ebdal/index')
    },

]

代码如下（示例）：

import * as React from "react";
import {
    
     HashRouter, Route, Switch, Redirect } from 'react-router-dom'
import {
    
     renderRoutes } from 'react-router-config';
import * as Loadable from 'react-loadable'
import {
    
     routers } from './routes'
const _ = require('lodash')

const Loading = ({
    
     isLoading, error }) => {
    
    
  if (isLoading) {
    
    
    return <div>加载中...</div>
  }
  else if (error) {
    
    
    return <div>出错了</div>
  }
  else {
    
    
    return null;
  }
};

const routes = _.map(routers, item => {
    
    
  return {
    
    
    ...item,
    key: item.path,
    exact: true,
    component: Loadable({
    
    
      loader: item.loader, // 需要异步加载的路由
      loading: Loading // 这是一个的提示
    })
  }

})


//没有匹配到路由
const NoMatch = () => (
  <div>404，找不到页面， <a href='/'>回首页。</a></div>
)




const RouteConfig = () => (
  <HashRouter>
    <Switch>
      {
    
    renderRoutes(routes)}
      <Route exact component={
    
    NoMatch} />
    </Switch>
  </HashRouter>
)

export default RouteConfig

“react-router-config”: “^5.1.1”,
“react-router-dom”: “^5.2.0”