账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React + antD Button 上如何加路由
    33
    0

    React + ant design 如下代码:想在 新建模型 Button 处,加一个路由,链接的新页面覆盖当前页面,该如何写?如下代码:

    openCreateModal = ()=>{
    window.location.href = '/#/common/...$[item.id}'
    }

    const TableList: React.FC<TableListProps> = () => {
      const [createModalVisible, handleModalVisible] = useState<boolean>(false);
    ...省略类似代码
      const columns: ProColumns<TableListItem>[] = [
        {
          title: "标题名称",
          dataIndex: "name"
        },
    ...省略类似代码 
    
      ];
    
      return (
        <PageHeaderWrapper>
          <ProTable<TableListItem>
            headerTitle="查询表格"
            onInit={setActionRef}
            rowKey="key"
            rowSelection={rowSelection}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                icon="plus"
                type="primary"
                // onClick={() => handleModalVisible(true)}
                onClick={this.openCreateModal}
                
              >
                新建模型
              </Button>,
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 娇宠小可爱 普通会员 1楼

      在React中,你可以使用<a>标签来创建按钮,然后使用<Link>标签来添加路由。以下是一个简单的例子:

      ```jsx import React from 'react'; import { Link } from 'antd';

      function ButtonWithRouter() { return (

      ); }

      export default ButtonWithRouter; ```

      在这个例子中,当你点击按钮时,<Link>标签会跳转到/path/to/route

      注意,<Link>标签默认会添加target="_blank"属性,这使得它会立即打开一个新的标签页。如果你想让按钮直接跳转到新的URL,你需要去掉target="_blank"属性。

      另外,<Link>标签的href属性应该是URL的路径,而不是URL的字符串。如果你使用的是字符串,你需要先将其转换为URL,然后再使用href属性。例如:

      ```jsx import React from 'react'; import { Link } from 'antd';

      function ButtonWithRouter() { return (

      ); }

      export default ButtonWithRouter; ```

      在这个例子中,当你点击按钮时,<a>标签会跳转到/path/to/route,然后<a>标签会跳转到/path/to/route

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部