Skip to main content

路由

目前 Viter 暂时只支持单页应用（spa）场景。在该场景下，页面跳转都在浏览器端完成，由路由进行控制。Viter 路由部分基于最新的 react-router@6, 相比于旧版本的路由，跳转和参数获取方式有所差异，具体可参考文档《Migrating React Router v5 to v6》

配置路由#

在 viter.config.ts 配置文件中通过 routes 进行配置，格式如下：

export default {  routes: [    { path: '/', component: './home' },    { path: '/about', component: './about' },  ],};

path#

  • Type: string

配置路由路径，与 react-router@6 的 path 要求一致

component#

  • Type: string

配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 目录开始找起。

如果指向 src 目录的文件，可以用 @，也可以用 ../。比如 component: '@/layouts/index'，或者 component: '../layouts/index'。

routes#

配置子路由，通常在需要为多个路径增加 layout 组件时使用。

比如：

export default {  routes: [    { path: '/home', component: './home' },    {      path: '/',      component: '@/layouts',      routes: [        { path: '/form', component: './form' },        { path: '/table', component: './table' },      ],    },  ],};

然后在 src/layout/index 中通过 <Outlet> 渲染子路由，

import { Outlet } from 'viter';export default (props) => {  return (    <div style={{ padding: 20 }}>      <Outlet />    </div>  );};

这样，访问 /form 和 /table 就会带上 src/layouts/index 这个 layout 组件。

redirect#

  • Type: string

配置路由跳转。

比如：

export default {  routes: [    { path: '/', redirect: '/home' },    { path: '/home', component: './home' },  ],};

访问 / 会跳转到 /home，并由 src/pages/home 文件进行渲染。

页面跳转#

由于本框架路由模块基于 react-router@6 ，路由的基础跳转用法与 react-router@6 保持一致。实例如下：

import { useNavigate } from 'viter';
// FC 组件function xxx() {  const navigate = useNavigate();  // 跳转 home  navigate('/home');  // 后退  navigate(-1);}

class 组件兼容#

对于 class 组件，viter 提供高阶组件 withRouter，你可以用 withRouter 中注入的 history 来进行跳转。该方法主要用作兼容 class 组件和 react-router@5 部分写法，但我们强烈建议在增量的项目中使用 hooks 写法。

import { withRouter } from 'viter';
// class 组件class Home extends React.Component {  constructor(props) {    super(props);    const { history } = props;    // 跳转login    history.push('/login');    // 后退    history.goBack();  }}export default withRouter(Home);

Link 组件#

如下配置：

import { Link } from 'viter';
export default () => (  <div>    <Link to="/login">go login</Link>  </div>);

之后点击 go login 就会跳转到 /login 地址。

注意：

  • Link 用于单页应用的内部跳转，如果是外部地址跳转请使用 a 标签

路由组件参数#

组件被 withRouter 包裹后，可以在 props 中拿到下面的参数

  • match，包含路由参数信息：match.params。
  • location，表示应用当前位置信息，包含 pathname、search、query 等属性
  • history，用于路由跳转，例如 history.push() history.go() 等