路由
配置路由
在 smallfish 中配置路由是在 config/config.js
中:
// config/routes.js
export default [
{
path: '',
component: '../layout',
routes: [
{ path: '/', component: 'Home' },
{ path: '/list', component: 'List' },
],
},
];
// config/config.js
import routes from './routes';
export default {
routes, // 设置路由,一般建议单独用 routes 文件引入
};
而路由组件的来源是按照约定承载在 ./page
目录结构下的。
自定义 404
约定 page/404.js
为 404 页面,需返回 React 组件。
// config/routes.js
export default [
{
component: '../layout',
routes: [
{ path: '/', component: 'home' },
{ path: '/list', component: 'list' },
{ path: '/user', component: 'user' },
{ path: '/test', component: 'test' },
{ path: '/private', component: 'private', Routes: ['src/page/auth'] },
{
component: '404',
},
],
},
];
// page/404.js
export default () => <div>404</div>;
使用路由方法
通过 import { xxx } from 'smallfish/router';
可以获取所有你需要操作路由的方法。
import {
router,
history,
Link,
NavLink,
Prompt,
Redirect,
Route,
withRouter,
} from 'smallfish/router';
设置路由权限
smallfish 的权限路由是通过配置路由的 Routes 属性来实现。
// config/routes.js
export default [
{
path: '',
component: '../layout',
routes: [
{ path: '/', component: 'Home' },
{ path: '/list', component: 'List', Routes: ['src/page/Auth'] },
],
},
];
而通过 Auth
组件 则可以控制 List
组件展现:
// page/auth.js
export default ({ children, hasAuth }) => {
return (
<>
{hasAuth && children}
{!hasAuth && <NotAuth />}
</>
);
};