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>
);
}
Source: stackoverflow.com
Related Query
- Router does not work with Link (React Router Dom 6)
- react router dom link with params dont allways work
- React Router Link Right Click does not work
- React router NavLink activeClassName does not work with redux and styled components
- window.location does not work with react app using react router 4
- Link props when passed does not work when browser back and forth is clicked React router v4
- Why react router does not work with redux?
- react router changing to current page with different params does not work
- React router Dom Link does not change URL
- This react onClick does not work is this Router Link wrong?
- React router does not work correctly when used with react hooks?
- Why Link from React Router Dom does not refresh when go back?
- React router v6 useNavigate does not work with redux dispatch
- React Router with path like /list/:page does not work on reload
- React Router work on reload, but not when clicking on a link
- react router relative link does not link properly
- Can not pass state with react router dom v6 beta, state is null
- Basename does not seem to be taken into account with matchPath in react router
- React Formik does not work with number input
- React router navigation does not work
- React Router Link doesn't work with LeafletJS
- React Router v4 nested routes not work with webpack-dev-server
- Adding new DOM items with React in Chrome does not keep expected scroll position
- React router dom redirect problem. Changes url, does not render component
- Reactjs react router dom useParams not working with dynamic url
- React createPortal with useRef does not work
- ReactJS: Go to anchor link in HTML with react router dom
- Why ES6 ComputedPropertyName does not work with this react js code?
- React Router with different paths on same component: does not re-initialize component (useEffect [] not called)
- React router dom passing data from parent component to child router component does not pass the props.match
More Query from same tag
- Unable to pass test case in React saying simulate a function onClick()
- webpack-dev-server: getting a 404 on an AJAX redirect
- How to display a spinner when data is loading from server by fetch api in REACT JS?
- React: The best way to pass html attributes as props
- React Apollo queries that rely on other queries
- how do i return http tags in map function react
- Reactjs dashboard - multiple instances with an array of parameters
- platform.pause.subscribe at Ionic-React
- Passing Additional Arguments with map() in React
- React: Passing props between classes is always undefined
- How to Resolve Failed to load config "prettier" to extend from. in react Js
- Access the updated value after Set state in React
- I am unable to handle state correctly on Safari due to the useState hook
- React: Hook not triggering when parent component changes boolean value passed to child
- How to use React in multiple places in a normal website
- How to define defaultProps using arrow function component (rafce)?
- How to set the default style to a React Component
- onClick event not firing on simple code (ReactJS)
- How to use Fine Uploader in React js
- In React, global state goes out of sync when route parameters are manually changed in url
- useMutation reload data after refetch
- Next.js + Redux: A Page is loaded before fetching data actions in getInitialProps is complete
- Render React element from object value
- How to use react-final-from calculated fields with an array of objects
- Retrieve data after find user in database table
- How to create dynamic href in react render function?
- Set Priority of React Router
- How to expand a Toggle upwards in react bootstrap?
- How can i authorize a route in react with redux?
- In react, how do I do an if statement