如何從一個頁面到另一個頁面

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'; 

而在你的回報，您可以通過

​​