React router dom is working for some component but not working for another component

Question

My problem is that react-router-dom is working for Homepage and productList but not working for Signin component. I think there is no problem with snowpack. But I put snowpack config file, in case there is some problem. The weird thing is I added a Header for Homepage and product list but I didn't added the header for Signin component. but after changing the route, header is showing even I didn't add Header into the Signin Component. I am so confused that why this is happening.

App.jsx

import React from 'react';
import Homepage from './Containers/Homepage';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductList from './Containers/ProductList';
import Signin from './Containers/Signin';

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Homepage} />
          <Route path="/:slug" component={ProductList} />
          <Route exact path="/signin" component={Signin} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

Signin.jsx

import { Typography } from '@material-ui/core';
import React from 'react';
import Layout from '../Components/Layout';

const Signin = () => {
  return (
    <div
      style={{
        marginTop: '10rem',
        paddingTop: '10rem',
        background: 'black',
        height: '100vh',
      }}
    >
      Signin
    </div>
  );
};

export default Signin;

Header.jsx

this file is big. but I'm adding the route call.

const handleButtonClick = (pageURL) => {
  history.push(pageURL);
};

<Button variant="contained" onClick={() => handleButtonClick('/signin')}>
  Login
</Button>;

snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } /
module.exports = {
mount: {
/ ... /
public: "/",
src: "/dist",
},
plugins: ["@snowpack/plugin-react-refresh"],
routes: [
{ match: "all", src: "/api/.", dest: (req, res) => proxy.web(req, res) },
{ match: "routes", src: ".", dest: "/index.html" },
],
optimize: {
/ Example: Bundle your final build: /
// "bundle": true,
},
packageOptions: {
polyfillNode: true,
},
devOptions: {
port: 3000,
},
buildOptions: {
/ ... */
},
};

package.json

{
  "name": "ecommerce-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@snowpack/plugin-webpack": "^2.3.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "formik": "^2.2.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-query": "^3.13.12",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "snowpack dev",
    "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"
    ]
  },
  "devDependencies": {
    "@snowpack/plugin-react-refresh": "^2.5.0",
    "snowpack": "^3.3.7"
  }
}

Any help will be appreciated before I punch my Laptop Screen. Thanks.

score 0 · Answer 1 · answered May 18 '21 at 11:07

The problem is with

<Route path="/:slug" component={ProductList} />
<Route exact path="/signin" component={Signin} />

/:slug as first route accepts everything and renders the productList on every request other than / Homepage because of the exact attribute.

You can interchange its position with the signIn component to get the correct Component Rendering. Like this

<Route exact path="/signin" component={Signin} />
<Route path="/:slug" component={ProductList} />

lawrence-witt · Answer 2 · 2021-05-18T15:42:42.650

This route:

<Route path="/:slug" component={ProductList} />

Is a match for /signin, where signin is treated as the parameter :slug. In fact, this route will match pretty much any path except /, because you don't have an exact prop. The path /a/b/c/d is a match, where a is the parameter :slug.

I would restructure the switch to look like this:

<Switch>
    <Route path="/" exact component={Homepage} />
    <Route exact path="/signin" component={Signin} />
    <Route path="/:slug" component={ProductList} />
</Switch>

It will now choose the first matching path, which is your static route. I would also potentially make the /:slug path exact as well if you are not expecting to match all paths here.

React router dom is working for some component but not working for another component

2 Answers2