如何使用按钮将一个 JS 页面链接到另一个 JS 页面答案

【问题标题】：How do I use a button to link one JS page to another JS page如何使用按钮将一个 JS 页面链接到另一个 JS 页面
【发布时间】：2021-08-02 19:24:18
【问题描述】：

目前我有这个代码：

<a href='./housing1.html'>
  <button type="button" className="Button" class="btn btn-dark btn-lg btn-block">Submit</button>
</a>

这很容易将我带到一个 HTML 页面，但是当我尝试转到一个 JS 页面时，我已经创建了它，要么只在网页上显示代码，要么页面闪烁。这与文件的位置有关还是我在 React 中使用了一些东西来解决这个问题？

【问题讨论】：

什么是“JS页面”？
您是否使用路由器在不同的“页面”之间进行切换，这些页面在反应中被称为路由？
<a> 元素被禁止包含<button> 元素（反之亦然）。选一个。如果需要链接，请使用链接。如果您不喜欢它的外观，请应用 CSS。
@ArbiasGjoshi 如何使用带按钮的路由器？
让我在答案部分给你写下来。

标签： javascript html reactjs web

【解决方案1】：

假设您正在使用@reach/router 或react-router-dom 之类的东西。它们都有自己的组件函数，例如Link，可让您在应用中导航。

import React from 'react'
import { Link } from '@reach/router';

const SampleComponent = () => (
   <div className="someWrapper">
     <Link to='/your-path'>  
      <button type="button" className="Button btn btn-dark btn-lg btn-block">
          Submit
      </button>
     </Link>
     <h1>Other code would enter here</h1>
   </div>
)

export default SampleComponent;

要知道，为了让这个工作你还需要设置你的路由器页面才能导航。阅读各个包的文档，因为它们非常简单且易于集成。

P.S - React 不允许您使用 class 属性，因为这是 ECMAScript 中的保留关键字。因此，要分配任何类，就像您使用按钮完成的情况一样，请将所有内容放入 className

另外请注意上面的评论不要使用按钮的内部链接，而是将锚标签设置为按钮，从而实现所需的逻辑。

【讨论】：