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>
Source: stackoverflow.com
Related Query
- Post ID route showing up in other components
- React-Router 4 default route content displays on all other components
- ROUTING ISSUE: Components showing on screen after an clickable-button route
- Reactjs router exact doesn't work and override other route components to current route
- Render timeout dialog in other route components
- The React.js route in the component must call other components depending on the URL
- How does react-router pass params to other components via props?
- react-router-dom get id from route with custom components and extra path
- How to test a component composed of other components with react-testing-library?
- require css in React component affects other components too
- Why can I not nest Route components in react-router 4.x?
- How to use react components from other files
- React styled-components: refer to other components
- Components not re-rendering on route change - React HashRouter
- ReactJS styles 'leaking' to other components
- React Component not showing on matched Route (react-router-dom)
- react-router-dom not rendering components on route change
- Components overlapping each other in React
- SecurityError: replaceState cannot update history to a URL which differs in components other than in path, query, or fragment
- How to horizontally center a component while there are other components in the same row?
- React Day Picker calendar overlay pops up behind other components
- React router render prop route always re-renders components
- It's okay to declare other components inside a component?
- React Router components getting unmount on route change
- Error text for Components other than TextField and SelectField
- can't route successfully between components in react app
- Passport.js, Sessions, & React | Accessing req.user from any route other than the /login route is undefined
- How to access route params from a component other then the Router component
- How should child components in React communicate between each other in a clean and maintainable fashion?
- Render two components adjacent to each other in React
More Query from same tag
- How can change deep fields in redux-form with this.props.change
- How can I use a hook after conditional statements in React?
- Firebase not returning ID in useCollectionData
- react: why static propTypes
- How to create the sectiondata in the react native sectionlist
- Tell background script when content script injected with React?
- Archilogic embed floor plan with next js project
- Want to avoid multiple actions on click of a header
- Add & Remove class on button in React
- Update state in React
- React JS Conditionally rendering animated lottie component on upload
- Firebase CORS policy blocking only for some functions
- Spring CORS error
- Weekly display of headers with react-table
- Accessing similar DOM elements
- "datalabels" property applied to all "datasets"
- How to display different components when clicking a button on one page?
- reactjs url changes on navlink but view doesn't change
- Can't work beforeunload function in React js
- Creating a language switcher for i18n app
- reducers get Function not Object in redux, what's wrong with it?
- Remove DOM in react.js,
- Can I pass a presentational component a class based component as a property and have the presentational component render it?
- Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty
- Duplicate ReactJS import issue when using npm link to test component before publishing as npm package
- Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`
- How to use use-supercluster with Typescript
- A map within a map from an array, within an array
- Why should one use React with Meteor?
- sending input value to backend using react & axios