Switch Route doesn't work on click until refresh page manually

Question

When I click on "go to cart" my URL changes but there is no change on visual.. When I refresh browser page, it appears. I have tried adding exact many times but it doesn't help. I share my code below. Found few solutions but none of them fixed it.

here is my package.json

{
  "name": "northwind-redux",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "alertifyjs": "^1.13.1",
    "bootstrap": "^5.1.3",
    "react": "^18.0.0",
    "react-bootstrap-validation": "^0.1.11",
    "react-dom": "^18.0.0",
    "react-redux": "^7.2.8",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "reactstrap": "^9.0.2",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

the application layer is app.js

import React from "react";
import Navi from "../navi/navi";
import { Container } from "reactstrap";
import Dashboard from "./Dashboard";
import { Route, Switch } from "react-router-dom";
import CartDetail from "../cart/CartDetail"
import AddOrUpdateProduct from "../products/AddOrUpdateProduct";

function App() {
  return (
    <Container>
      <Navi></Navi>
        <Switch>
        <Route exact path="/" component={Dashboard} />
        <Route path="/product"  component={Dashboard} />
        <Route exact path="/cart"  component={CartDetail} />
        <Route path="/saveproduct/:productId"  component={AddOrUpdateProduct}/>
       </Switch>      
    </Container>
  );
}

export default App;
    

lastly called CartSummary.js;

import React, { Component } from "react";
import { NavDropdown, Nav, Badge } from "react-bootstrap";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as cartActions from "../../redux/actions/cartActions";
import { Link } from "react-router-dom";
import alertify from "alertifyjs"; 


class CartSummary extends Component {
  removeFromCart(product) {
    this.props.actions.removeFromCart(product);
    alertify.error(product.productName + " removed from cart");
  }

  renderEmpty() {
    return <Nav.Link>Empty Cart</Nav.Link>;
  }
  renderSummary() {
    return (
      <NavDropdown title="Your cart" id="basic-nav-dropdown">
        {this.props.cart.map((cartItem) => (
          <NavDropdown.Item key={cartItem.product.id}>
            {cartItem.product.productName}{" "}
            <Badge bg="success">{cartItem.quantity}</Badge>{" "}
            <Badge
              bg="danger"
              onClick={() =>
                this.removeFromCart(cartItem.product)
              }
            >
              X
            </Badge>
          </NavDropdown.Item>
        ))}
        <NavDropdown.Item></NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <Link to="/">Main page</Link>
        <NavDropdown.Divider />
        <Link to="/cart">Go to cart</Link>
      </NavDropdown>
      
    );
  }
  render() {
    return (
      <div>
        {this.props.cart.length > 0 ? this.renderSummary() : this.renderEmpty()}{" "}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    cart: state.cartReducer,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      removeFromCart: bindActionCreators(cartActions.removeFromCart, dispatch),
    },
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(CartSummary);

in App.js coloring of code looks like Dashboard is called correctly (it indicates green color) but the CartSummary color is different (light blue) it also show there is something wrong with it.

Answer 1

Since you are using react-router v6, you cannot do what you are trying to do with the old Redux APIs. You are trying to read the router props that react-router till v5 passed to your Components through props to change the redux selectors, but unfortunately the new react-router v6 does not do that anymore, and you have to retrieve the route info through react hooks. This means that you can't access the route params inside the mapStateToProps unless you directly pass the params as a prop.

If you can't upgrade your codebase to using react hooks and redux-toolkit selectors, you have just two options, or you stick with react-router v5, or you should wrap your App Component with an HOC that gives you the params you need:

// HOC withMatch.js

import { useMatch } from 'react-router-dom';

const withMatch = Component => props => {
  const match = useMatch("/*");
  return <Component {...props} match={match} />;
};



// App.js

function App({match}) {
  return (
    <Container>
    <Navi></Navi>
    <Routes>
      <Route path="/" element={<Dashboard/>} />
      <Route path="/product" element={<Dashboard/>}/>
      <Route path="/saveproduct/:productId" element={<AddOrUpdateProduct match={match}/>}/>
      <Route path="/cart" element={<CartDetail/>}/>
     </Routes>
    </Container>
  );
}

export default withMatch(App)

This way your main parent has access to the params and can pass them down as props, hence they can be accessed by react-redux old APIs.