React permanently appends path to URL-CodePudding

I am using react-router-dom for navigation and all routing seems to work fine when using the navigation bar NavLinks. However, I created another component called 'ViewReport.js' that is 'NOT' part of the navigation bar NavLinks but is included in my routes. Users are redirected to this component when they click on a report id in order to display report details.

THIS IS WHERE THE ISSUE COMES IN:

using localhost:300 in order to not disclose the actual app

After clicking a report id the user is routed to localhost:3000/reportapp/viewreport to display the report details.
If the user clicks the Dashboard link in the navigation bar they are directed to localhost:3000/reportapp/viewreport/ instead of localhost:3000/reportapp.
The same goes for any other link in the navigation bar such as /archive, /create, and /support. They all result in following when using the navigation bar form the ViewReport.js component.
- localhost:3000/reportapp/viewreport/create
- localhost:3000/reportapp/viewreport/support
- localhost:3000/reportapp/viewreport/archive

The only way to actually get back to the Dashboard page is to manually change it in the url bar or to click the browser back button over and over till you reach the page prior to clicking the report id. What I am trying to do is actually route to the routes I have the NavLinks linked.

router code


function App() {
  
  return (      
    <Router basename={`/${name}`}>
      <div>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Dashboard} />
          <Route path="/Create" component={Create} />
          <Route path="/Archive" component={Archive} />
          <Route path="/Support" component={Support} />
          <Route path="/Resources" component={Resources} />
          <Route exact path="/ViewReport" component={ViewReport} />
        </Switch>
      </div>
    </Router>


    
  );
}

export default App;

Navigation Bar

            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <div className="container-fluid">
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarText">
                <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                    <li className="nav-item">
                    <NavLink className="nav-link" aria-current="page" to="./" exact={true}>Dashboard</NavLink>
                    </li>
                    <li className="nav-item">
                    <NavLink className="nav-link" to="./Create">Create Report</NavLink>
                    </li>
                    <li className="nav-item">
                    <NavLink className="nav-link" to="./Archive">Archived Reports</NavLink>
                    </li>
                    <li className="nav-item">
                    <NavLink className="nav-link" to="./Support">Support</NavLink>
                    </li>
                    <li className="nav-item">
                    <NavLink className="nav-link" to="./Resources">Resources</NavLink>
                    </li>
                    </ul>
                    <span className="navbar-text">
                        <h2 className="amazon-orange titlestyle">Amazon FitTool</h2>
                    </span>
                </div>
            </div>
        </nav>

CodePudding user response：

Change

<NavLink className="nav-link" aria-current="page" to="./" exact={true}>Dashboard</NavLink>

<NavLink className="nav-link" aria-current="page" to="/" exact={true}>Dashboard</NavLink>

./ to /.

And as you have said

The same goes for any other link in the navigation bar

E.g. ./Support to /Support