Routing in ReactJS. URL is displayed but component is not rendered

Question

I have the following piece of code in my parent component:

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

And this in Main component:

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;

Login:

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;

On click I want to be redirected to Login page, but the problem is that when i click on that 'button' the URL is changed to '/login', but the corresponding component isn't rendered. However, if I refresh the page with that '/login' url the component is rendered. Thanks for any help in advance!

EDIT: I'm not using PureComponent and wrapping exports in withRouter doesn't solve my problem too.

Please check the duplicate. let me know if that doesn't work for you — Shubham Khatri, Nov 12 '18 at 10:56
More code of the Main component would help in figuring out a solution then — Shubham Khatri, Nov 12 '18 at 11:15

score 2 · Accepted Answer · answered Nov 12 '18 at 11:25

You should only have the top-level component (in your case, App) rendering the Router component. All of the components under that (ex. Main) should not have a Router in the render function. They will inherit the parent's Router. You can still use Link or Route components inside of the child components and they will navigate the parent Router.

Routing in ReactJS. URL is displayed but component is not rendered

1 Answers1