在ReactJS中進行路由。 顯示URL，但未呈現組件

Question

我的父組件中有以下代碼：

class App extends Component {
render() {
    return(
        <Router>
            <div>
            <Route exact path='/' component={Main} />
            <Route path="/login" component={Login} />
            </div>
        </Router>
    );
}}

而這在主要部分：

import React, { Component } from "react";
import {BrowserRouter as Router, Route, Link } from 'react-router-dom'

class Main extends Component {

    render() {
        return (
            <Router>
            <section className="section main">
            <div className="container">
            <div className="main-titles-container">
                <div className="main-titles">
                <div className="yellow-square"></div>
                <h1>Title</h1>
                <p>
                    Introduction
                </p>
                <div className="button-container">
                    <Link to='/login' className="btn select bg-yellow" id="buyer">Next</Link>
                </div>
                </div>
            </div>
        </div>
        </section>
        </Router>
        );
    }
}

export default Main;

登錄：

import React, { Component } from 'react';

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

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

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


    handleSubmit(e) {
      e.preventDefault();
      console.log(this.state);
    }

    render() {
      return (
        <section className="section">
            <div className="container center center-xy">
                <h1 className="title center-self">Title</h1>
                <h1 className="title center-self">Log in</h1>
                <div className="form-container">
                    <form onSubmit={this.handleSubmit}>
                    <label htmlFor="email">Email</label>
                    <input type="text" name="email" id="email" onChange={this.handleChange} defaultValue="" required/>
                    <label htmlFor="cellphone">Cell phone</label>
                    <input type="text" name="cellphone" id="cellphone" defaultValue="" onChange={this.handleChange} required/>
                    <button className="bg-yellow center-self" type="submit">Ok</button>
                    </form>
                </div>
            </div>
        </section>
      );
    }
  }

  export default Login;

在單擊時，我想重定向到“登錄”頁面，但是問題是，當我單擊該“按鈕”時，URL更改為“ /登錄”，但未呈現相應的組件。 但是，如果我使用“ / login” URL刷新頁面，則會呈現該組件。 感謝您的任何幫助！

編輯：我不使用PureComponent，並且在withRouter中包裝導出也不能解決我的問題。

Answer 1

您應該只具有渲染Router組件的頂級組件（在您的情況下為App ）。 該渲染器下的所有組件（例如Main ）都不應包含Router 。 他們將繼承父級的Router 。 您仍然可以在子組件內部使用Link或Route組件，它們將導航父Router 。