CODEWITHSUNDEEP
javascriptreactjsreact-router
augusto amaral
augusto amaral

Reputation: 125

Component being remounted when route change

I am experiencing the following problem: I have two screens in my application, one if the user has access and one if not. If the user has access to the system, he will be redirected to the screen A, a private route that has internal states, when the private routes change, the internal state of that screen A should continue until he changes to a non-private or unknown route.

The point is, I have a private routes vector, but when I loop these routes and add a key to each Router component, on each change of route, it will unmount and mount component A (Code sample here), so I lose the internal state of A, and if I add the key to the child component of A, the internal state remains as I would like (Code sample here), however I break the child key rule of react.

Warning: Each child in a list rule should have a unique" key "prop.

Any help would be amazing! :)

@Edit: the code snippet of first sandbox. The difference between the first one and the second is the key prop, instead it be inside Route, it is within the component.

@Edit 2: I've fixed it cdeclaring all routes statically and letting the access policy come dinamically. Ty for help! If anyone find a better solution, It'll be wellcome! :)

  { canAccess: true, path: "/home", component: () => <div>Home</div> },
  { canAccess: true, path: "/foo", component: () => <div>Foo</div> },
  { canAccess: false, path: "/blah", component: () => <div>Blah</div> }
];

const Homepage = () => {
  return (
    <div>
      <Link to="/home">Home</Link>
      <br />
      <Link to="/foo">Foo</Link>
      <br />
      <Link to="/blah">Blah</Link>
    </div>
  );
};

const Main = ({ children }) => {
  const [innerState, setInnerState] = useState(112);
  return (
    <div>
      {children}
      {JSON.stringify(innerState)}
      <br />
      <button onClick={() => setInnerState(innerState + 1)}>AddNumber</button>
      <Homepage />
    </div>
  );
};

const PrivateRoute = ({ component: Component, path, canAccess, index }) => (
  <Route
    key={index}
    path={path}
    render={() =>
      canAccess ? (
        <Main>
          <Component />
        </Main>
      ) : (
        <div>Not found :(</div>
      )
    }
  />
);

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          {defaultRoutes.map((route, index) => {
            return PrivateRoute({ index, ...route });
          })}
          <Route path="/" exact component={() => <Homepage />} />
          <Route component={() => <div>Not found :(</div>} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

Upvotes: 0

Views: 58

Answers (1)

augusto amaral
augusto amaral

Reputation: 125

I've fixed it cdeclaring all routes statically and letting the access policy come dinamically. Ty for help! If anyone find a better solution, It'll be wellcome! :)

Upvotes: 1

Related Questions