1

This is the code in App.js

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

import Navbar from './components/layout/Navbar'
import Footer from './components/layout/Footer'
import Landing from './components/layout/Landing'
import Register from './components/auth/Register'
import Login from './components/auth/Login'

import './App.css';


class App extends Component {
  render() {
    return (
      <div className="App">
      <Router>
        <Navbar/>
        <Switch>
          <Route exact path="/" component={Landing}/>
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
        </Switch>
        <Footer/>
      </Router>
      </div>

    )
  }
}

export default App;

And this is the landing page code with the Links to the different routes.

import React, { Component } from 'react';
import {Link} from "react-router-dom";

class Landing extends Component {
  render() {
    return (
        <div className="landing">
        <div className="dark-overlay landing-inner text-light">
          <div className="container">
            <div className="row">
              <div className="col-md-12 text-center">
                <h1 className="display-3 mb-4">Developer Connector
                </h1>
                <p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
                <hr />
                <Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
                <Link to="/login" className="btn btn-lg btn-light">Login</Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Landing

The issue is that it changes the url on clicking the link but nothing changes on the page. The component doesn't get rendered. I saw many answers about this issue and tried many things but couldn't solve the issue. Please help.

Shubham Kapadia
  • 23
  • 3

1 Answers1

0

I don't know why but removing <React.StrictMode> & </React.StrictMode> from index.js solved the issue.

I would like to understand the reason if anyone can tell.

This is the code now in index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);
reportWebVitals();
Shubham Kapadia
  • 23
  • 3
  • There's an issue between React 18 and RRDv5 that the maintainers don't appear to be in any hurry to address. I suspect it's because most devs are either still using React 16/17 and RRDv5, or have already moved to RRDv6 where there's no issue with any version of React. See the linked dupe for *brief* explanation, link to issue, and suggested resolutions. – Drew Reese Apr 29 '22 at 16:30