文章目录
router 6 的使用方法
一、创建route组件
import React, { FC } from 'react';
import { Route as RRoute, RouteProps as RRouteProps } from 'react-router-dom';
export type RouteProps = {
children: RRouteProps['element'];
} & RRouteProps;
const RouteComponent: FC<RouteProps> = ({ ...props }) => (
<RRoute path={props.path} element={props.children} />
);
export default RouteComponent;
二、路由组件
(1)基础路由组件
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
//下面这两个都是页面中的路由逻辑关系,我写到一个文件里去了
import AdultRoutes from 'views/account-adult/routes';
import ConfigRputes from 'views/account-config/routes';
const Main = (): React.ReactElement => (
<BrowserRouter>
<Routes>
<Route path="/*" element={AdultRoutes} />
<Route path="/config/*" element={ConfigRputes} />
</Routes>
</BrowserRouter>
);
export default Main;
(2)页面组件
以AdultRoutes
为例子
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import BaseLayout from 'layouts/Base';
import BaseLogin from 'src/components/base-login';
const SearchInactive = React.lazy(() => import('views/account-adult/search-inactive'));
const SearchAll = React.lazy(() => import('views/account-adult/search-all'));
const InactiveDetail = React.lazy(
() => import('views/account-adult/search-inactive/components/detail'),
);
const AdultRoutes = (
<Routes>
<Route
path="/"
element={
<BaseLogin>
<BaseLayout>
<React.Suspense fallback={<>loading...</>}>
<SearchAll />
</React.Suspense>
</BaseLayout>
</BaseLogin>
}
/>
<Route
path="inactive"
element={
<BaseLogin>
<BaseLayout>
<React.Suspense fallback={<>loading...</>}>
<SearchInactive />
</React.Suspense>
</BaseLayout>
</BaseLogin>
}
/>
<Route
path="/inactive/detail"
element={
<BaseLogin>
<BaseLayout>
<React.Suspense fallback={<>loading...</>}>
<InactiveDetail />
</React.Suspense>
</BaseLayout>
</BaseLogin>
}
/>
</Routes>
);
export default AdultRoutes;
所以这里又三种路由分别对应
/ ----> SearchAll
/inactive. ------> SearchInactive
/inactive/detail. -------> InactiveDetail
三、在app中引入
import React from 'react';
import { ConfigProvider } from 'antd';
import moment from 'moment';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import Router from './router';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
function App() {
return (
<div className="App">
<ConfigProvider locale={zh_CN}>
<Router />
</ConfigProvider>
</div>
);
}
export default App;
四、页面中进行跳转
在页面中需要跳转,或者需要往url push信息时,直接使用useNavigate
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const handleSubmit = useCallback(
values => {
navigate({
pathname: '/inactive',
search: queryString.stringify({
...values,
pageIndex: 1,
pageSize: 10,
}),
});
},
[navigate],
);
search使用
import { useLocation } from 'react-router-dom';
const location = useLocation(); //是给search使用
const search = useMemo(() => queryString.parse(location.search), [location.search]);
//还可以在函数中使用,不做赘述
const pageIndex = +search.pageIndex || 1; //可以直接获取,+代表数字,
const pageSize = +search.pageSize || 10;
五、baseUrl使用+重定向
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import AssetsRoutes from 'views/assets-center/routes';
import LabelRputes from 'views/label-manage-center/routes';
const Main = (): React.ReactElement => (
<BrowserRouter basename="api_asset_plt"> //baseUrl
<Routes>
//当输入/ 重定向到/assets
<Route path="/" element={<Navigate to="/assets" replace />} />
<Route path="/assets/*" element={AssetsRoutes} />
<Route path="/label/*" element={LabelRputes} />
</Routes>
</BrowserRouter>
);
export default Main;
router 5及以下
一、设置loading组件
import React, { FC, memo, ComponentClass, ReactNode, Suspense } from 'react'
import { Route as RRoute, RouteProps as RRouteProps } from 'react-router-dom'
import { Spin } from 'antd'
// const ErrorPage = React.lazy(() => import('layouts/Error'));
export type RouteProps = {
isAuth?: boolean
fallback?: NonNullable<ReactNode> | null
lazy?: boolean
layout?: ComponentClass<any> | FC<any>
} & RRouteProps
export const Route: FC<RouteProps> = ({
lazy = true,
isAuth = true,
fallback,
layout: Layout,
children,
...props
}) => {
const Fallback = fallback ? (
fallback
) : (
<div className={'spin-loading'}>
<Spin tip={'加载中...'} />
</div>
)
const Component = lazy ? (
<Suspense fallback={Fallback}>{children}</Suspense>
) : (
children
)
return (
<RRoute {...props}>
<Suspense fallback={Fallback}>
{Layout ? <Layout>{Component}</Layout> : Component}
</Suspense>
</RRoute>
)
}
export default memo(Route)
二、设置history组件
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history
三、路由组件
这里可以直接导入页面组件
import React from 'react';
import { Router, Switch } from 'react-router-dom';
import Route from './route';
import history from './history';
import BaseLayout from 'layouts/Base';
//import
const StatisticsList = React.lazy(() => import('views/statistics/list'));
const ErrDetails = React.lazy(() => import('views/statistics/errDetails'));
const Main = (): React.ReactElement => {
return (
<Router history={history}>
<Switch>
<Route path={'/'} layout={BaseLayout} exact>
<StatisticsList />
</Route>
<Route path={'/err/detail'} layout={BaseLayout}>
<ErrDetails />
</Route>
</Switch>
</Router>
);
};
export default Main;
- 可以直接看出6省略了createBrowserHistory的用法
- 而且也不需要自己写加载的组件