react umi路由去#

如果您想要使用 umi 框架来配置路由，并且想要去掉路由中的 "#", 可以使用 umi-plugin-history 插件来实现。

首先，安装 umi-plugin-history 插件：

npm install umi-plugin-history --save-dev

然后，在 umi 配置文件 config/config.js 中配置插件：

export default {
  plugins: [
    ['umi-plugin-history', {
      basename: '', // 设置路由的 basename
      forceRefresh: true, // 强制刷新页面
      disableDotRule: true, // 不允许路径中存在 "."
      query: {
        key: 'value',
      },
    }],
  ],
};

在配置中，可以设置路由的 basename，强制刷新页面等选项。配置完成后，重新启动项目即可生效。这样就可以去掉路由中的 "#" 符号了。

相关问题

react umi 路由传参

在React Umi中，可以通过路由传参来传递参数给目标页面。下面是一种常用的方法：

1. 使用query参数传递参数：
在源页面使用`history.push`或`Link`组件跳转到目标页面时，可以通过在URL中添加参数来传递数据。例如：

import { Link } from 'umi';

function SourcePage() {
  const data = { name: 'John', age: 25 };

  return (
    <Link to={`/target?name=${data.name}&age=${data.age}`}>
      Go to Target Page
    </Link>
  );
}

在目标页面中，可以通过`location.query`来获取传递的参数。例如：

function TargetPage({ location }) {
  const { name, age } = location.query;

  return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
    </div>
  );
}

2. 使用state参数传递参数：
在源页面使用`history.push`或`Link`组件跳转到目标页面时，可以通过state参数来传递数据。例如：

import { Link } from 'umi';

function SourcePage() {
  const data = { name: 'John', age: 25 };

  return (
    <Link to={{ pathname: '/target', state: data }}>
      Go to Target Page
    </Link>
  );
}

在目标页面中，可以通过`location.state`来获取传递的参数。例如：

function TargetPage({ location }) {
  const { name, age } = location.state;

  return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
    </div>
  );
}

react umi路由封装

React Umi 是一个基于 React 的企业级前端应用框架，它提供了一系列的工具和插件来帮助我们快速构建前端应用。在 React Umi 中，路由的封装是非常重要的一部分，它能够帮助我们更方便地管理页面之间的跳转和权限控制。

在 React Umi 中，路由的封装可以通过两种方式来实现：

1. 使用 umi-plugin-access 插件进行权限控制

通过使用 umi-plugin-access 插件，我们可以在路由配置中定义权限控制规则，然后在页面组件中使用 access 来控制页面的访问权限。这样，我们就可以在不同的用户角色和权限下，动态地展示不同的页面和功能。

2. 使用 umi-plugin-layout 插件进行布局管理

通过使用 umi-plugin-layout 插件，我们可以在路由配置中定义不同的布局模板，然后在页面组件中使用 layout 属性来指定页面所属的布局模板。这样，我们就可以在不同的页面中使用不同的布局模板，从而实现更加灵活的页面布局。

总的来说，React Umi 提供了非常方便的路由封装工具，可以帮助我们更加高效地管理页面之间的跳转和权限控制。