ReactJS 中的路由。显示 URL 但未呈现组件

Posted 2023-02-21

【中文标题】ReactJS 中的路由。显示 URL 但未呈现组件

【英文标题】：Routing in ReactJS. URL is displayed but component is not rendered

【发布时间】：2019-04-15 01:58:34

【问题描述】：

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

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 中包装导出也不能解决我的问题。

【问题讨论】：

请检查副本。如果这对你不起作用，请告诉我

@ShubhamKhatri 这些答案都没有解决我的问题

更多主要组件的代码将有助于找出解决方案

请显示您的登录名和主要组件

@ShubkhamKhatri 添加了

【参考方案1】：

您应该只让***组件（在您的情况下为App）呈现Router 组件。其下的所有组件（例如Main）在渲染函数中不应有Router。他们将继承父母的Router。您仍然可以在子组件中使用Link 或Route 组件，它们将导航父Router。