score:1
the most important thing to know when using react-router is that:
the path attribute defines the route url and component attribute defines the component for this route.
i would suggest having a read through this. best practice suggest, just like matt derrick suggested in the comments that the url should drive the rendering of components.
since you have acomponent and bcomponent that render based on the state i would suggest you then have 2 different urls to accompany that. so when state changes to be ==='a' then you will jump to /aurl, when the state changes to be ==='b' then you will jump to /burl.
hope this answers your question.
Source: stackoverflow.com
Related Query
- react router dom is not updating class component when url change
- change Url when component renders with react-router-dom?
- React router history.push updates URL but doesn't update component when used with redux
- React Router Dom & Firebase Auth: history.push changes url but does not render new component when called after firebase auth create account
- How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router
- Multiple params with React Router change url but not component
- How to scroll to top on route change with react router dom v6?
- React router with browserHistory goes to server on every URL change
- Reactjs react router dom useParams not working with dynamic url
- Render Same Component With Multiple Paths React Router Dom
- React component not re-rendering on URL parameter change when using useEffect hook to fetch data
- Embedded child component doesn't get changed when I click a new one with React Router
- React router not reloading Component when changing url params
- Multi layout react routing with 404 component and without re-rendering layout on URL change
- React Router - Uncaught SyntaxError: Unexpected token < when refreshing an URL with params
- React Router Dom deletes vales when I change page
- React Router Dom change URL on website load
- Implement shouldComponentUpdate with React hooks - Render child only once, but make DOM changes when props change
- React component doesn't change state when react router remounts it
- React Router dom change history without changing the component
- How to fix "TypeError: Object(...) is not a function" when using a wrap function on React Component to authenticate user login with Browser Router
- How to access param in parent component with React Router DOM
- Change BreadCrumb component that was done with react-router v5 to react router v6
- React Router Dom doesn't recognize url with query params
- React components not rendered on url change with React Router
- Reactjs - changing url using react router but the component does not change
- Navbar component location doesn't update when route changed, with React Router
- Issue with routing in React when user directly hits url that requires id from another component
- React router - page doesn't change when navigating from outside component
- React Router Link to same component with different URL not re-rendering
More Query from same tag
- Align typography component to the right
- How can I treat an array of values to be a tuple that is inferred based on what's passed to it
- Why mobX action doesn't trigger rerendering of React component
- react.js render components at different locations
- How to Pass properties from array of objects to api request
- Loop inside React JSX
- Using componentDidUpdate to change the state in the component
- store.dispatch is not a function
- React - filter deletes all items instead of one
- React TypeScript: react-markdown no overload matches this call
- React router v4 - activeStyle and activeClassName not working
- How to use useRef when element is inside condition?
- ReactJS- Execute function while sending to child Component
- React Childs component changes his parents state
- How can I animate a react.js component onclick and detect the end of the animation
- Apollo client access component props with hoc and TypeScript
- I want SweetAlert popup to stay on the same page when I click outside the popup but it navigates to another page
- How can I make url rewrite on google cloud app engine?
- How to fix verbal deployment errors with react project?
- Uncaught TypeError: this.context.router.push is not a function
- HTML webpack plugin not injecting script to template
- How to show all properties of an object in HTML in React
- "sh: 1: react-scripts: not found" In Docker
- Redux - Understanding advanced mapStateToProps returning a function
- is any methods for refreshing data in table in react js?
- Allow arbitrary data-* attributes on React component with Typescript
- How Can I return a specific image in Gatsby for my reusable component?
- Add a PDF file in Gatsby
- Using React-Query QueryCache from another component
- Is it possible to align a div based on a condition?