Javascript 如何在导航栏中重定向ReactJS

您好，我正在尝试在导航栏中的页面之间重定向，我想知道如何执行该特定组件

这是我的密码

function redirectRegistration() {
  window.location = '../src/Registration.JS'
}

function redirectLogin() {
  window.location = '../src/App.js'
}

const loginBtn = document.getElementById('login');
const registerBtn = document.getElementById('registerPage');

loginBtn.addEventListener('click' , redirectLogin);
registerBtn.addEventListener('click' , redirectRegistration)

---

我正在尝试知道如何从登录重定向到注册页面。

您没有以“反应方式”进行操作。可以使用箭头语法重写函数，也可以在渲染方法中使用JSX创建按钮。试试这个：

    redirectRegistration = () => {
        window.location = '../src/Registration.JS'
    }

    redirectLogin = () => {
        window.location = '../src/App.js'
    }

    render() {
        return (
          <React.Fragment>
            <button id="login" onClick={this.redirectLogin}>Login</button>
            <button id="registerPage" onClick={this.redirectRegistration}>Register</button>
          </React.Fragment>
        );
  }

redirectRegistration=（）=>{
window.location='../src/Registration.JS'
}
重定向登录=（）=>{
window.location='../src/App.js'
}
render（）{
返回(
登录
登记
);
}

两件事

首先，React有一个虚拟dom，它不是围绕获取元素ID然后向元素添加侦听器而构建的。React组件有一个render方法，您可以将JSX（基本上是HTML）放在其中，您可以为它们所在的HTML放置事件侦听器方法

通常，您会在React内部构建按钮组件，然后添加onClick方法，这与添加click事件侦听器相同。老实说，我不确定doucment.getElementByID是否与React配合使用，但即使它配合使用，React也不是设计用来使用的方式，以这种方式构建也会给您带来问题

其次，在React中，除非重定向到外部位置，否则通常不使用window.location重定向。即便如此，您通常还是将其包装在React Router的标记中。React/SPA的一个优点是，您只需刷新页面中已更改的部分，而使用window.location可以消除这一优点

React路由器通常是在React中重定向的方式，但它也是围绕React组件的使用而构建的，而不是使用getElementByID和事件侦听器

---

建议：将按钮重构为React组件，然后使用React路由器进行重定向

两个问题：1）您是否使用任何路由API（即React路由器）？2） 您试图实现硬导航还是软导航（硬导航意味着URL更改时整个页面将重新加载）？检查。React router是一个不错的选择。@BlunderingSpherector这是我用来操作特定组件的Javascript代码，但这就是我在Javascript中重定向的方式，我想知道如何在react@ChristianSantos我没有使用任何路由API，从登录组件到注册组件应该是软导航在这种情况下，我同意@croraf的观点，React Router是一个不错的选择，除非您出于某种原因需要实现自己的路由器