React router automatically redirecting to /

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

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

Source: Ask Javascript Questions

LEAVE A COMMENT