Question

我有一个SignIn表单，我想创建SignUp链接。

在链接上单击我想打开SignUp页面。

我在另一个app.js中创建了index.js，我编写了SignIn逻辑。

Here is the Code :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class App extends Component {
    constructor(props) {   
       super(props);
       this.state = {
          email: "",
          password: ""
       };
     }

     validateForm() {  
         return this.state.email.length > 0 && this.state.password.length > 0;
      }

      handleChange = event => {
           this.setState({
             [event.target.id]: event.target.value
            });
       }

      handleSubmit = event => {
         event.preventDefault();
      }

      render(){
          return (  

            <div class="container">

             <form onSubmit={this.handleSubmit}>

                 <div id="login">

                <div class="form-group">

                <h2 align="center">Login Form</h2>

                 Email :

                 <input type="email" id="email" value={this.state.email} onChange={this.handleChange} class="form-control" placeholder="Email Address"/><br/>

                  Password :
                  <input type="password" id="password" value={this.state.password} onChange={this.handleChange} class="form-control" placeholder="Password"/><br/>

                  <a href= " Signup / ">Sign Up</a><br/><br/>//here I want to change 

                  <button id="send" disabled={!this.validateForm()} class="btn btn-default">Sign In</button>
                                  </div>
                                </div>
                              </form>
                            </div>
                    );
                  }
                }

                export default App;

我已添加了Anchor标签，但它不会起作用。我想创建链接来代替锚标记，只需点击即可打开注册页面。我已经开始创建signUp页面

这是我的代码：

                import React, { Component } from 'react';
                import './App.css';
            export default class Signup extends Component {

                  render(){
                            return (

                            <div class ="container">

                              <form>           

                                  <div id="signup">

                                  <div class="form-group">

                                  First Name :
                                    <input type="text" id="first" class="form-control" placeholder="First Name"/><br/>

                                  Last Name :
                                    <input type="text" id="last" class="form-control" placeholder="Last Name"/><br/>

                                  Email :
                                    <input type="email" id="email" class="form-control" placeholder="Email"/><br/>

                                  Password :  

                                    <input type="password" id="password" class="form-control" placeholder="Password"/><br/>

                                  Re-enter Password :

                                    <input type="password" id="confirm" class="form-control" placeholder="Confirm Password"/><br/>

                                    <button id="save">Save</button>

                                </div>
                                </div>
                                </form>
                                </div>
                    );
                  }
                }

如何创建从一个页面到另一个页面的路径？

Answer 1

如果您使用的是react-router 4.x及更高版本，请将其导入为

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

对于react-router版本＆lt; 4.x的

import {Link} from 'react-router';

在您的回访中，您可以通过

链接到另一个页面

<Link to="/signup">Signup</Link>

Answer 2

使用Link代替a代码：

import { Link } from 'react-router-dom';
.
.
<Link to='/signup'>Sign Up</Link>

编辑：我现在正在为您的解决方案更新代码，但我需要您了解，在此处发布问题时，您可能无法获得此类解决方案。 Stack Overflow要求您在询问任何问题之前阅读任何文档并进行广泛的研究我需要你看看下面的代码并通过在复制粘贴它之前阅读React Router文档来完全理解它。

将您的App.js更改为：

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import Signup from './Signup';
import './App.css';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }

  validateForm() {
    return this.state.email.length > 0 && this.state.password.length > 0;
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleSubmit = event => {
    event.preventDefault();
  }
  render() {
    return (
      <div class ="container">
        <form onSubmit={this.handleSubmit}>
          <div id="login">
            <div class="form-group">
              <h2 align="center">Login Form</h2>
              Email :
                <input type="email" id="email" value={this.state.email} onChange={this.handleChange} class="form-control" placeholder="Email Address"/><br/>
              Password :
                <input type="password" id="password" value={this.state.password} onChange={this.handleChange} class="form-control" placeholder="Password"/><br/>
                <Link to="/signup">Signup</Link>
                <button id="send" disabled={!this.validateForm()} class="btn btn-default">Sign In</button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
            <Router>
              <Switch>
                <Route exact path='/' component={Login}/>
                <Route path='/signup' component={Signup}/>
              </Switch>
            </Router>
    );
  }
}

export default App;

并实现了您的预期工作。如果通过接受此答案或下面的评论来解决这个问题，请告诉我 P.S：React Router docs：https://reacttraining.com/react-router/web/guides/philosophy
快乐的编码！

如何从一个页面转到另一个页面

2 个答案: