Question 72926 in Reactjs Question posted in
The new location for the React Documentation can be found here.

react app reloads when changing page within the app – Reactjs

My react app work fine in dev mode, but as soon as I change page the app reloads and in production mode it doesn’t work. It’s because the app reloads and it’s okay in dev mode, but not in production mode

I use react-router-dom and I have tried changing the path without result.

I have made it in codesandbox.io here, it works but it still reloads the app and I can’t see what’s wrong

EDIT:

it’s all under cv because it’s going to be in a folder called cv (cv == resume) like this => http://firstname.lastname.com/cv

Tags:

2

Answers


  1. 0

    Try this in your navbar:

    import {Link} from 'react-router-dom';
...

return (
    <StyledTypo textAlign="center" key={p.name} component="a" href={p.link}>
      <Link to={p.link}>
        <MenuItem onClick={handleCloseNavMenu}>{p.name}</MenuItem>
      </Link>
    </StyledTypo>
    Login or Signup to reply.
  2. 0

    I moved most of the code into same file (Just for convince to copy from here and not to have to create many different files). However I still use your navbar as it was before (in the sandbox).

    Not sure why you had the nav bar under cv. But moved it to the root. However to have Sub menu I created to links that should symbolise that without any css styling.

    Now when the layout is moved out (could been its own file so the routes). It works without the whole page refreshes. Only the affected route

    app.jsx

    import { Routes, Route, Outlet, Link, useParams } from "react-router-dom"
import { Box } from "@mui/material";
import NavBar from "./navbar"

const ContactsLayout = () => {
  return <>
    <ul>
      <li><Link to="/Contacts/1">test 1</Link></li>
      <li><Link to="/Contacts/2">test 2</Link></li>
    </ul>

    <br />
    <Outlet></Outlet>
    </>;
};

const Contacts = () => {
  const {id} = useParams();
  return <>test {id}</>;
};

const CV = () => {
  return <>hej</>;
};

function App() {

  const hej = "Hello";

  const pages = 
     [
      { name: "Home", link: "/" },
      { name: "Write me", link: "/Contacts" },
      { name: "Projects", link: "/CV" }
    ];


  return (
   <>
    <Box sx={{ mt: 4, p: 8 }}>
      <NavBar pages={pages} navn={hej} />

      <Routes>
        <Route path="/" element={<p>test</p>}/>
        <Route path="/Contacts" element={<ContactsLayout />}>
          <Route path=":id" element={<Contacts />}/>
        </Route>
        <Route path="/CV" element={<CV />}/>
      </Routes>
    </Box>
   </>
  );
}

export default App;

    I also suggest that you update app.jsx to look like this and use strict mode:

    import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search