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

Question

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

链接点击我想打开SignUp页面。

我已经创建了index.js什么也没有在另一个app.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; 

我已经添加了锚标签，但它不会工作。我想创建链接代替锚点标签，在点击注册页面将打开。我已经开始创建注册页面也

这里是我的代码：

   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

使用Link，而不是链接到另一个页面标签：

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

编辑：我更新您的解决方案的代码了，但我需要你明白，只要你在这里张贴问题，你可能不会得到这样的解决方案。堆栈溢出要求您在查询任何问题之前仔细阅读任何文档并进行广泛的研究。
我需要你看看下面的代码，并通过在复制粘贴之前阅读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：反应路由器文档：https://reacttraining.com/react-router/web/guides/philosophy
快乐编码！

Answer 2

如果您使用的反应路由器4.x及以上，然后将其导入这样

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

对于反应路由器版本4.x版<

import {Link} from 'react-router'; 

而在你的回报，您可以通过

​​