score:2

Accepted answer

move const apphistory = createbrowserhistory() out of the component. you want a stable history reference.

you'll need to implement some history state as well. use the browserrouter source code as the example for how the high-level routers instantiate their history context.

example:

const history = createbrowserhistory();

function app() {
  const [state, setstate] = usestate({
    action: history.action,
    location: history.location
  });

  uselayouteffect(() => history.listen(setstate), [history]);

  return (
    <div classname="app">
      <h1>hello codesandbox</h1>
      <h2>start editing to see some magic happen!</h2>

      <router
        location={state.location}
        navigationtype={state.action}
        navigator={history}
      >
        <ul>
          <li>
            <link to="/">home</link>
          </li>
          <li>
            <link to="/about">about</link>
          </li>
          <li>
            <link to="/pricing">pricing</link>
          </li>
        </ul>
        <routes>
          <route path="/" element={<h1>home</h1>} />
          <route path="/about" element={<h1>about</h1>} />
          <route path="/pricing" element={<h1>pricing</h1>} />
        </routes>
      </router>
    </div>
  );
}

edit router-does-not-work-with-link-react-router-dom-6


Related Query

More Query from same tag