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”