page needs refresh when click on a route

Question

My problem is that when I click on an element defined by Route, the URL changes but the page does not change and I have to reload the page once to change the page.

i have no idea what is happening here

Node.js: 16.5

npm: 8.10.0

react-router-dom: 5.3.1

Thanks for your help

Routes:

import React from "react";
import { Route, Switch, BrowserRouter  } from "react-router-dom";
import Login from "../Login/login";
import Navbar from "../Navbar/navbar";

export default function Routers(){
    return(
        <BrowserRouter>
        <Switch>
          <Route path="/log-in">
            <Login />
          </Route>
          <Route path="/">
            <Navbar />
          </Route>
        </Switch>
      </BrowserRouter>
    );
}

navbar.js:

import React from "react";
import * as Mu from "@mui/material";
import { Link } from "react-router-dom";

export default function Navbar(){
    return(
        <Link to="/log-in">
      <Mu.Button variant="contained" color="success">Log in</Mu.Button>
      </Link>
    )
}

App.js:

import React from "react";
import Routers from "./commponents/Routes/routes";

function App() {
  return (
    <div className="App">
      <Routers />
    </div>
  );
}

export default App;

login.js:

import React from "react";
import * as Mu from "@mui/material";
import * as Icons from "@mui/icons-material";
import study from "../.././assets/img/study.jpg"
import uni from "../.././assets/img/Uni-3.png";
import homework from "../.././assets/img/homework.jpg";


export default function Login(){

    return (
        <Mu.Grid container className="h-100 justify-content-center">
            <Mu.Grid item sm={12} className="text-center login">
                <Mu.Box className="login-box d-inline-block">
                    <Mu.Grid container dir="rtl" className="h-100">
                    <Mu.Grid item xs={12} md={7} className="login">
                        <div className="w-100">
                        <Mu.Card sx={{ maxWidth: "100%" }} className="d-md-none d-sm-block d-block login-card">
                            <Mu.CardMedia component="img" alt="green iguana" width="100%" height="100" className="login-card" image={homework}/>
                            </Mu.Card>
                        <Mu.Container fixed>
                        <Mu.Avatar alt="profile" className="text-center bg-white border d-inline-block ms-3 mb-3 prof-pic" src={uni} sx={{ width: 70, height: 70 }}/>
                            <h4 className="ps-md-4 ps-sm-0 ps-0">ورود به پنل مدیران</h4>
                              <Mu.Box sx={{ display: 'flex', width:"100%", alignItems: 'flex-end' }} className="px-md-3 px-sm-0 px-0">
                                   <Icons.Person sx={{ color: 'action.active', mr: 1, ml: 3 }} />
                                   <Mu.TextField id="username" label="نام کاربری" className="w-75" variant="standard" />
                              </Mu.Box>
                              <Mu.Box sx={{ display: 'flex', width:"100%", alignItems: 'flex-end', mt: 1 }} className="px-md-3 px-sm-0 px-0">
                                   <Icons.Lock sx={{ color: 'action.active', mr: 1, ml: 3 }} />
                                   <Mu.TextField id="password" label="رمز عبور" className="w-75" variant="standard" />
                              </Mu.Box>
                              <Mu.Button sx={{ mt: 4, width: "50%"}} variant="contained">ورود</Mu.Button>
                        </Mu.Container>
                        </div>
                    </Mu.Grid>
                    <Mu.Grid item xs={12} md={5} className="h-100 d-md-block d-sm-none d-none">
                        <img src={study} width="100%" height="100%" className="login-img" />
                    </Mu.Grid>
                    </Mu.Grid>
                </Mu.Box>
            </Mu.Grid>
        </Mu.Grid>
    );
}

What version of React are you using, React 18? Does this answer your question? https://stackoverflow.com/a/71833424/8690857 — Drew Reese, May 12 '22 at 15:30

m-s7 · Answer 1 · 2022-05-12T14:05:29.560

0

Add exact attribute to your index route <Route exact path="/">.
If it does not work try wrapping components with withRouter: <Route exact path="/" component={withRouter(Component)}

Also move <BrowserRouter> to your main file, example:

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

edited May 12 '22 at 14:05

answered May 12 '22 at 13:45

m-s7

337
1
10

None of them worked – Arta Gbn May 12 '22 at 13:55
Then try moving ` ` to index.js. – m-s7 May 12 '22 at 14:02
you mean the whole Route? – Arta Gbn May 12 '22 at 14:03
no, only ``, I added example code to my answer – m-s7 May 12 '22 at 14:03
it doesn't change page's data only URL changes – Arta Gbn May 12 '22 at 14:06
I think it has something to do with the version of react router dom, try to use the 4.3.0 for react router dom and react router, and im pretty sure it will work. The thing is to know how to implement it for version 5. Also navbar doesnt make sense to be inside Switch component: https://codesandbox.io/s/nostalgic-nash-nnd83s?file=/src/components/Routes.js – Nacho May 12 '22 at 14:09

page needs refresh when click on a route

1 Answers1