CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
N.SH
N.SH

Reputation: 693

Refresh in react page redirect it to /404 page

I have some routes in my react application and I describe that any url out of my routes redirect to /404 page , but it doesn't work correctly ; when I refresh my page it redirects to /404 page and even when I want to go to / (home page) redirects to /404 to ! below is my routes :

<Router>
      <Switch>
          <UserProvider>
             <PageLayout>
                <Route exact to="/" ><HomePage /></Route >
                <Route to="/product" ><Product /></Route >
                <Route to="/contactus" ><ContactUs /></Route >
                <Route to="/aboutus" ><AboutUs /></Route >
                <Route to="/404" ><NotFound /></Route >
                <Redirect from="/**/" to="/404" />
             </PageLayout >
          </UserProvider >
      </Switch>
</Router>

Can anyone say to me what is my problem?

Upvotes: 0

Views: 202

Answers (2)

Aris
Aris

Reputation: 1004

The problem is the below:

<Router>
      <Switch>
        ...
        <Redirect from="/**/" to="/404" />
      </Switch>
</Router>

You redirect the /**/ to /404

Read this article here

Maybe you should do it like that:

Change /**/ with * and rearrange your routes as:

<Router>
      <Switch>
        ...
        <Redirect from="*" to="/404" />
        <Route to="/404" ><NotFound /></Route >
      </Switch>
</Router>

Or you can just use (if React version >= 4)

<Redirect to="/404" />

The React Router Documentation here

Upvotes: 0

Artur Salikhov
Artur Salikhov

Reputation: 45

<Router>
  <Switch>
    <Route to="/" exact component={HomePage}/>
    <Route to="/product" exact component={Product}/>
    <Route to="/contactus" exact component={ContactUs}/>
    <Route to="/aboutus" exact component={AboutUs}/>
    <Route to="/*" exact component={NotFound}/>
  <Switch>
 <Router/>

Try this. I think it gonna work ;)

Upvotes: 1

Related Questions