React forms change

Question

私はボタンをクリックすると、別のフォームに置き換えた後にフォームを作成しようとしています。私はこのために "リンク"を使用しようとしましたが、ボタンをクリックした後、別のフォームが最初のフォームの中に表示されます。これを修正するために私のコードを変更するには？

マイApp.js：

import React, { Component } from 'react'; 
import './App.css'; 
import Login from "./Login"; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <Login /> 
     </div> 
    ); 
    } 
} 

export default App; 

マイLogin.js：

import React from 'react'; 
import CreateUser from "./CreateUser"; 
import GetUser from "./GetUser"; 
import { BrowserRouter as Router, Link, Route} from 'react-router-dom'; 

export default class Login extends React.Component { 
    state = { 
    email: '', 
    password: '', 
    }; 

    change = e => { 
    this.setState({ 
     [e.target.name]: e.target.value 
    }); 
    }; 

    onSubmit = (e) => { 
    e.preventDefault(); 
    console.log(this.state); 
    }; 

    render() { 
    return (
     <form> 
     <br /> 
     Login 
     <br /> 
     <br /> 
     <input 
     name="email" 
     placeholder='email' 
     value={this.state.email} 
     onChange={e => this.change(e)} 
     /> 
     <br /> 
     <br /> 
     <input 
     name="password" 
     type='password' 
     placeholder='password' 
     value={this.state.password} 
     onChange={e => this.change(e)} 
     /> 
     <br/ > 
     <br/ > 
     <Router> 
     <div> 
     <button onClick={e => this.onSubmit(e)}> 
     <Link to="/GetUser">Login</Link> 
     <Route exact path="/GetUser" component={GetUser}/> 
     </ button> 
     <br/ > 
     <br/ > 
     <button onClick={e => this.onSubmit(e)}> 
     <Link to="/CreateUser">Sign Up</Link> 
     <Route exact path="/CreateUser" component={CreateUser}/> 
     </button> 
     </div> 
     </Router> 
    </form> 
    ); 
    } 
} 

私がログインボタンをクリックすると、GETUSERフォームはログインフォームの内側に表示されますが、私はGETUSERフォームを置き換えたいですログインフォーム。

Thxをすべて、 エドゥアルド・グリ

Answer 1

ルートは、コンポーネントにそれを置く場所を正確にレンダリングします。一致するものが見つかると、ルートをコンポーネントGetUserに置き換えます。 GetUserをレンダリングする必要がある場合は、ルートを定義する場所です。あなたが行っているときに、リンクとルートを同じ場所に配置する必要はありません。表示異なるコンポーネントに置き換えられますビューと共通のレイアウトだから、

がスイッチとして表されるべきと一致する最初のルートがレンダリングされます：あなたのケースではhttps://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

あなたはその親コン​​ポーネントを必要としますログインと他のルートをレンダリングするswitch文がある場合、Loginコンポーネントのすべてを実行しようとしません。