score:0
Issue
Using window.location.href = "/not-found"
mutates the current location and reloads the page, i.e. it will remount the entire React app. Use an imperative redirect to the "/not-found"
route.
Solution
import { useHistory } from 'react-router-dom';
...
const history = useHistory();
...
useEffect(() => {
getSlug(slug)
.then((res) => {
const { id, title } = res.data;
document.title = title;
getSetting(id)
.then((result) => {
setStyle(result.data);
});
getLangue(id)
.then((res) => {
setLang(res.data.langue);
});
})
.catch((error) => {
history.replace("/not-found"); // REPLACE = redirect
});
}, [slug]);
Render a Route
on path="/not-found"
that can be redirected to.
<Switch>
<Route path="/myflix/:slug/register" component={Signup} />
<Route path="/myflix/:slug/event" component={Event} />
<Route path="/myflix/:slug/contact" component={Contact} />
<Route path="/myflix/:slug/login" component={Login} />
<Route path="/myflix/:slug/show-details" component={ShowList} />
<Redirect from="/myflix/:slug/*" to="/not-found" /> // <-- redirect unhandled paths
<Route path="/myflix/:slug" component={Home} />
<Route path="/not-found" component={NotFound} /> // <-- render NotFound component route
<Redirect to="/not-found" />
</Switch>
score:2
window.location.href
does indeed refresh the page. Since you seem to be using React Router Dom v5
, you should be using useHistory to make redirections. Here is an overview of how you would use it:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
Not related to useHistory
or the redirection, but you could optimise slightly your routes setup:
<Switch>
<Route exact path="/myflix/:slug" component={Home} />
<Route exact path="/myflix/:slug/register" component={Signup} />
<Route exact path="/myflix/:slug/event" component={Event} />
<Route exact path="/myflix/:slug/contact" component={Contact} />
<Route exact path="/myflix/:slug/login" component={Login} />
<Route exact path="/myflix/:slug/show-details" component={ShowList} />
<Route path="*" component={NotFound} />
</Switch>
Source: stackoverflow.com
Related Query
- How to redirect to not found page if slug doesn't exist using React Router Dom?
- react router dom v6 doesnt redirect to not found
- How to redirect route with id to not found if id doesn't exist in react router
- how to show details page using react router dom
- How can handle not found page for nested routing in react router v4?
- Redirect not working on React, using react router dom
- Not found page and default home page always redirect to home - React Router
- How to render an iframe of local page within React app using React Router Dom
- How to redirect to another page using navlink react router
- My react router dom Redirect path is not working . Its not popping any error but is not making my home page to private Route
- How to navgiate to a new page using react router dom with typescript
- How to pass data from a page to another page using react router
- Using React Router to Redirect to next page after successful login
- React router dom redirect problem. Changes url, does not render component
- How to attach a compound component when using React forward ref (property does not exist on forwardRefExoticComponent)
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to create React App including Web3 using create-react-app? I am getting Module not found Error. BREAKING CHANGE: webpack < 5 used
- React Router Dom Redirect needs to refresh the page to work
- how to get params using react router dom v5.0.1
- How to manage React Js to multiple page app not using routes?
- React redux how to redirect to specific page using react-router
- How to track page views in react using reach router and google analytics?
- How can I add multiple path for home page with react router dom 6?
- How to redirect to another page using history on React js?
- How to redirect to homepage using React Router and React Query
- Property does not exist on state - Using React Router Hooks with TypeScript
- Scroll to a specific div on a new page using react router dom
- Redirect to a page that only show the contents of a component/page using React Router
- React Router Dom nested routing, or how to pass a slug
- How can i redirect to a component in react redux after returning promise (axios) . I am using react router 4
More Query from same tag
- No "onChange" event on materialize select element
- Changing values while sorting visualization
- React Native - Build successful but no APK output
- Getting an object instead of a boolean value
- React Router v6, How to place <Link /> into a button and event handler
- Programmatically collapse all react-accessible accordion panels
- React webpage refreshing every 4-6 seconds
- Cannot read value from axios GET request response outside of axios function
- React and Bootstrap: tooltip inside modal (appears behind modal window)
- Highcharts prevent page on mobile Safari from moving up and down as I scroll horizontally through data points
- React Component fails to re-render after update from Redux Store
- How to save api response in usestate and pass it react player source
- React JS API Post Throws ERR_ABORTED 415
- Add css styling (or class) to every element of react array of objects in a Component
- react-hook-form in combination with react-hook-recaptcha on Gatsby: SSR errors when reloading
- Prevent form submission in react with js disabled
- How to control Victory x axis ticks labels
- How can I effectively store data in array?
- React .map returns undefined with Fetch API
- Conditional rendering of CSS style in elements React
- Why I'm unable to properly authenticate with Google?
- How can I open Material UI Modal from parent component?
- React Redux mapStateToProps loads data in the second call
- React Browser Router handling F5 - returning 404
- uncheck (removing) last item in checkbox and check(adding) other at the same time , keeps the unchecked value and adds other checked value
- Display element at the top inside display:flex container
- pass default value from graphql query in apollo to child
- CSS Position Material UI Menu item below its parent
- React native List View onEndReached calling multiple times
- React Window How to Pass in Components?