CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
David Quartey
David Quartey

Reputation: 73

React Router Dom Link is having issues

So I have set routes in my react app as follows

const Routes = () => {
  return (
    <Router>
      <Switch>
        <ScrollToTop>
          <Suspense
            fallback={
              <div className="doncomi-preloader-wrapper">
                <div className="doncomi-preloader">
                  <span></span>
                  <span></span>
                </div>
              </div>
            }
          >
            <Header />
            <Route exact path="/" component={Home} />
            <Route path="/signin" exact component={SignIn} />
            <Route path="/signup" exact component={SignUp} />
            <Route exact path="/shop" component={Shop} />
            <Route path="/product" exact component={SearchPage} />
            <Route path="/product/:productId" exact component={ProductPage} />
            <PrivateRoute path="/account" exact component={UserAccount} />
            <VendorRoute
              path="/partners/account"
              exact
              component={VendorAccount}
            />
            <VendorRoute
              path="/create/category"
              exact
              component={AddCategory}
            />
            <VendorRoute path="/create/product" exact component={AddProduct} />
          </Suspense>
        </ScrollToTop>
      </Switch>
    </Router>
  );
};

export default Routes;

And in my component which receives props from parent components, I have a button which is meant to route to different products based on their IDs which it receives as props. This is how the button is set up

 <Link to={`product/${product._id}`}>
            <button className="btn btn-outline-warning mr-3">
              View product
            </button>

The problem is, when I click on the button it appends the url to the already existing url instead of replacing it. So I end up routing to something/product/productId.

Upvotes: 0

Views: 44

Answers (1)

David Quartey
David Quartey

Reputation: 73

So immediately after posting this, I realised I forgot to add a / before the route in the Link component 🤦🏽‍♂️😄

Upvotes: 2

Related Questions