React router automatically redirecting to /

Question

Hi I am using react router and it is not working for one page/component

ONLY working with ClientSideRouting. This issue occurs when route typed manually or refreshed

It is just a simple component which returns a div element. As soon as I route to that component IT REDIRECTS ME BACK TO "/"

Routes ("/project/new")

 <Switch>
        <Route exact path="/projects" component={ProjectsPage} />
        <Route exact path="/projects/:id" component={ProjectsPage} />

        <Route exact path="/project/new" component={StartProjectPage} /> // <=== ISSUE
        <Route exact path="/project/new/:id" component={StartProjectPage} />

        <Route exact path="/" component={StartPage} />
        <Route exact path="/:id" component={StartPage} />
      </Switch>
    </Router>

Component:

import React from 'react';

const StartProjectPage: React.FC = () => {
  return (
    <div>
      <h1>Start Project Page</h1>
        <p>Put something here</p>
    </div>
  );
};

export default StartProjectPage;

Thanks in advance

There's not enough to go on here, and no particular reason why this route would redirect you while the others do not. It would be great if you could produce a minimal working example on codesandbox or JSFiddle etc which demonstrates this problem. — lawrence-witt, Apr 20 '21 at 22:24
i believe this: https://reactrouter.com/web/api/Route/exact-bool and this: https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path should help you... probably drop the "exact" for the routes without ":id", maybe order them around a bit... — Noriller, Jun 18 '21 at 19:05

React router automatically redirecting to /

0 Answers0