Question

我目前正在使用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

提前感谢您的帮助！

Answer 1

J，您可以寻找react-router-dom

以概括的方式，您需要这样做：

导入react-router-dom依赖项
创建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

将此router.js文件添加到您的App.jsx中：

import Router from './router'

...
class component extends React.PureComponent {
  ...
  render() {
    ...
    return (
       ...
          <Router />
       ...
    )
  }
}

将Router添加到App.jsx文件后，请删除对旧代码的所有引用。
要打开页面，请将其添加到您的组件中：

import { Link } from 'react-router-dom'

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

...

以下一些参考可以帮助您：

Answer 2

因此，您可以使用React Router，也可以添加一条路由

有关详细信息，请参见下面的示例链接

[CodePen]  https://codepen.io/dwarka/pen/PLEMWX

更改节点js中的网页按钮单击

2 个答案: