时间戳

首页 > 解决方案 > 在节点 js 按钮单击更改网页

node.js - 在节点 js 按钮单击更改网页

问题描述

我目前正在使用 node.js 并有这个问题，

如何通过单击“测试”按钮从一页转到另一页？我试图通过按下按钮从 ./Landing 到 ./Login

这是我的代码：

import React, { Component } from 'react'
import {  Route,  NavLink,  HashRouter } from "react-router-dom";
import Login from "./Login";

    class Landing extends Component {
        render () {
            return (

        <button type="submit" class="btn btn-test">test</button>

            );
        }
    }

    export default Landing

预先感谢您的帮助！

标签： node.jsreactjs

解决方案

J，你可以找react-router-dom

概括地说，您将需要这样做：

  1. 导入react-router-dom依赖
  2. 创建router.js文件，如下所示：
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import { components } from './YOUR_COMPONENTS_FOLDER'

const Router = () => (
  <main>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={components.mainComponent} />
        <Route exact path="/login" component={components.loginComponent} />
        <Route component={components.notFoundComponent} />
      </Switch>
    </BrowserRouter>
  </main>
)

export default Router
  1. 将此router.js文件添加到您的App.jsx：
import Router from './router'

...
class component extends React.PureComponent {
  ...
  render() {
    ...
    return (
       ...
          <Router />
       ...
    )
  }
}
  1. 将路由器添加到 App.jsx 文件后，请删除对主页旧代码的任何引用。
  2. 要打开一个页面，您需要将其添加到您的组件中：
import { Link } from 'react-router-dom'

...
render () {
   <Link to="/login">
      YOUR BUTTON or something else to be clicked
   </Link>
}

...

以下是一些可能对您有所帮助的参考资料：

推荐阅读