Javascript 在ReactJS中路由。显示URL，但不呈现组件

我的父组件中有以下代码：

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;

类应用程序扩展组件{
render（）{
返回(
);
}}

这是主要组成部分：

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}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}
类主扩展组件{
render（）{
返回(
标题

介绍

下一个
);
}
}
导出默认主；

登录：

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;

import React，{Component}来自'React'；
类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
手机：“
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
const target=e.target；
这是我的国家({
[target.name]：target.value
});
}
handleSubmit（e）{
e、 预防默认值（）；
console.log（this.state）；
}
render（）{
返回(
标题
登录
电子邮件
手机
好啊
);
}
}
导出默认登录；

单击时，我希望重定向到登录页面，但问题是，当我单击该“按钮”时，URL更改为“/Login”，但相应的组件没有呈现。但是，如果我使用“/login”url刷新页面，则会呈现组件。 提前谢谢你的帮助

---

编辑：我没有使用PureComponent，用路由器包装导出也不能解决我的问题。

您应该只使用顶级组件（在您的情况下，

App

）来呈现

路由器

组件。该功能下的所有组件（例如，

Main

）在渲染功能中不应具有

路由器。它们将继承父级的
路由器
。您仍然可以在子组件内部使用
链接
或
路由
组件，它们将导航父
路由器
您应该只有顶层组件（在您的情况下，
应用程序
）来呈现
路由器
组件。该功能下的所有组件（例如，
Main
）在渲染功能中不应具有
路由器。它们将继承父级的
路由器
。您仍然可以在子组件内部使用
链接
或
路由
组件，它们将导航父
路由器
请检查副本。如果这对你不起作用，请告诉我you@ShubhamKhatri这些答案都没有解决我的问题。主组件的更多代码将有助于找出解决方案。然后，请显示您的登录名和主组件component@ShubkhamKhatri请检查副本。如果这对你不起作用，请告诉我you@ShubhamKhatri这些答案都没有解决我的问题。主组件的更多代码将有助于找出解决方案。然后，请显示您的登录名和主组件component@ShubkhamKhatri补充