1

I have simplified my problem. When I try to navigate through the nav-bar, url changes but the component remains the same. I am new to React, and have trouble with routing. I used the latest version of "react-router-dom" where Switch was not working, so I went back to the version 5.2.0. I could use Switch there but the problem remained. I have tried a lot but all in vain. If there is an efficient and easy way of routing this, please help me with that. Thanks

App.js

import './App.css';
import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

function App() {
    return (
        <Router>

            <nav>
                <Link to="/">Home</Link> <br />
                <Link to="/about">About</Link>
            </nav>

            <Switch>
                <Route exact path="/" render={() => {
                    return (<> This is home page </>)
                }}>
                </Route>
                <Route exact path="/about" render={() => {
                    return (<> This is about </>)
                }}>
                </Route>
            </Switch>

        </Router>
    );
}
export default App;
Armaghan Shakir
  • 13
  • 3
  • What version of `react` are you using, React 18? Does this help answer your question? https://stackoverflow.com/a/71833424/8690857 If that isn't the issue and the link doesn't clear it up, can you clarify what versions of packages you are using? Share your package.json file? – Drew Reese Jun 28 '22 at 19:24
  • I am using React 18.2.0. Looking at the link, I have tried different versions of react-router-dom but it didn't work. And I don't really know which package.json file to send there are so many. – Armaghan Shakir Jun 28 '22 at 20:05
  • If you are using React 18 and `react-router-dom@5.2.0` then the issue is an incompatibility. Try the solution of installing `react-router-dom@5.3.3`, the version with the fix to get RRDv5 working with React18. You should also have only 1 package.json file per app/repo. – Drew Reese Jun 28 '22 at 20:17
  • Thanks a lot, it finally worked after replacing and reinstalling react-router-dom@5.2.0 with react-router-dom@5.3.3 – Armaghan Shakir Jun 28 '22 at 20:30

0 Answers0