React router state?

Question

I have a simple code here. I am using react-router and I can't get why the state of all pages are fixed to the one of the initial render and the inputfields share all the value?

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Page from "./Page";

export default function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/users">Users</Link>

      <Switch>
        <Route path="/about">
          <Page direction="left" />
        </Route>
        <Route path="/users">
          <Page direction="right" />
        </Route>
        <Route path="/">
          <Page direction="up" />
        </Route>
      </Switch>
    </Router>
  );
}

import React, { useReducer } from "react";

export default function Page({direction}){
  let reducer = (state, action) => state;
  let [state, dispatch] = useReducer(reducer, {direction});
  return (<div><input type="text"/>{state.direction}</div>)
}

The code on given link is not working

Maheer Ali
– Maheer Ali

2020-09-26 11:09:08 +00:00
Commented Sep 26, 2020 at 11:09 — Maheer Ali
– Maheer Ali, Commented Sep 26, 2020 at 11:09

Yousaf · Accepted Answer · 2020-09-26 11:44:23Z

Although the other answer has provided a solution, i think its missing an explanation of the cause of the issue.

Problem:

So the problem is because of how React updates the UI in an optimized way. In your case, React is re-using your Page component. Because Page component is already in the DOM, instead of creating a new one, React re-uses the same instance of the Page component and only changes the data that has changed, in your case, only direction prop changes.

Adding the key prop works because this allows React to differentiate between different instances of Page component.

Alternative Solution:

When React re-uses the Page component, uderlying instance of the Page component stays the same but the different props are passed to the underlying instance.

In your code, since you are not updating the state when direction prop changes, you don't see a different state value.

To fix this, you can use useEffect hook that dispatches an action to update the state whenever direction prop changes.

Changing the code in Page.js file as shown below will fix the problem:

function reducer(state, action) {
  switch (action.type) {
    case "DIRECTION_CHANGE":
      return { ...state, direction: action.payload };
    default:
      return state;
  }
}

export default function Page({ direction }) {
  const [state, dispatch] = useReducer(reducer, { direction });

  useEffect(() => {
    dispatch({ type: "DIRECTION_CHANGE", payload: direction });
  }, [direction]);

  return (
    <div>
      <input type="text" />
      {JSON.stringify(state)}
    </div>
  );
}

For further details, see: React - Reconciliation

Fdr · Accepted Answer · 2020-09-26 11:11:54Z

2

You can fix it by adding a property key to each Page component

<Switch>
  <Route  path="/about">
    <Page key="/about" direction="left" />
  </Route>
  <Route path="/users">
    <Page key="/users"  direction="right" />
  </Route>
  <Route  path="/">
    <Page key="/" direction="up" />
  </Route>
</Switch>;

This way you will exploit the diffing algorithms https://reactjs.org/docs/reconciliation.html#keys

answered Sep 26, 2020 at 11:11

Fdr

1736 bronze badges

1 Comment

Krueger Over a year ago

Weird behavior, I was thinking that react does this automatically. Well, thanks.

A Macdonald · Accepted Answer · 2020-09-26 11:09:39Z

0

This works for me for your Page component:

import React from "react";

export default function Page(props) {

  return (
    <div>
      <input type="text" />
      {JSON.stringify(props)}
    </div>
  );
}

answered Sep 26, 2020 at 11:09

A Macdonald

8241 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

React router state?

3 Answers 3

Problem:

Alternative Solution:

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Problem:

Alternative Solution:

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related