score:1

Accepted answer

you are having issue because the path

<route path="/:post_id" component={post} />

shows that a dynamic value is expected at the post_id placeholder. as post_id is just a placeholder using about, portfolio, 1, etc as route parameters will satisfy the condition.

i.e

// all of them are valid
/about
/portfolio
/1

so post component shows up along with other components.

therefore you should wrap route components with switch component. as switch component only renders the first child that matches the path so post component will not show up when /about and /portfolio is used.

import { browserrouter, route, switch } from 'react-router-dom';

 <browserrouter>
    <div classname="app">
      <navbar />
      <switch>
        <route exact path="/" component={home} />
        <route path="/about" component={about} />
        <route path="/portfolio" component={portfolio} />
        <route path="/:post_id" component={post} />
      </switch>
    </div>
  </browserrouter>

Related Query

More Query from same tag