score:4
Accepted answer
you can do something like this in your rendering function:
class yourcomponent extends react.component {
render() {
var isactive = this.context.router.route.location.pathname === this.props.to;
return(
<navlink
to={route}
exact
activeclassname="selected"
>
<icon>{isactive && icon || othericon}</icon>
</navlink>
);
}
}
navlink.contexttypes = {
router: proptypes.object
};
this way you are actually checking if the route you are rendering is the active one and in case choose the correct icon
score:2
for a more independent component that will not need to be connected in a special way to context or redux. you could use withrouter, hoc element from react-router. after wrapping you have the match, location, history available for your component. so then you can check your route / to path string to the location object.
Source: stackoverflow.com
Related Query
- Render different components when active on Navlink
- Using React Router with Switch and can't get the page to render different components when changing routes
- Using for loops and switch cases in React to dynamically render different components
- How to render different components based off device size?
- Render different components on client and server side
- React + Material-UI style classes from different components conflict when served statically
- I have this error that say "Cannot update a components while rendering a different component" when I run react.js code
- React components render correctly in browser, but Jest test errors when rendering: "Only a ReactOwner can have refs"
- Is there a clean way to conditionally load and render different components for the same React Router route?
- How do I render components with different layouts/elements using react-router-dom v6
- React - How do i force child components to re render when parent state component changes?
- How to render different view when onClick button in ReactJS?
- Render two components at two different ids- React
- How to use React.forwardRef with TypeScript when using different html elements in the render
- react.js render components at different locations
- React.js - Render Components with Different Styles based on props
- Render Different Component if All Components return Null in ReactJS
- Is it possible to render different components depending on a url params value within the same url in react-router-dom?
- how to render different components using react-router-dom v6.0.0 with react-redux
- how do I render a page in react using functional components when onSubmit?
- Material-UI withStyles components wont render when testing with Enzyme + Jest
- Render different child components in React based on state
- What's the correct way to render React components with different styles such as Navbar using React Router 6v?
- How to render a component in a different page when click on a link in a table row in ReactJs
- Nothing is rendering when I implement routing but if I render in separate components it renders
- React Router: How to render different components with the same route conditionally
- React: input fields are not re-rendering when changing between different list components
- React Router: How to render different Components with different parameters
- What is the best way to render multiple button components with different values?
- How to loop and render different components from array in ReactJs?
More Query from same tag
- NPM install --global command Proxy Issue
- what's the right way to remove dynamic DOM Nodes from an event handler in React?
- how to stop response for each input event
- Creating a slider that slides items in an arc / upper cricle
- I want to know why setState does not work in onSubmit function
- How to change react-dates input border color?
- Return DOM element in render function of React component
- VS Code - Code Formatting space before curly braces
- How to pass previous React route through query param to next route
- How to Keep active state of an item inside of component that iterates over some dataset
- React/Recoil: once state is set in the main app, cannot be set again inside a component?
- React force re-mount component on route change
- react-Beautiful DnD – can only drag last item in droppable container
- get empty request while posting
- Posting a json data to my database with axios (using my backend api)
- Unterminated JSX contents - react
- How can I map an array of dicts inside a React return statement?
- React calling dynamic state names
- How to define local variable in another react file
- React - Converting Class to Function Components For Front-End
- How to disable tab arrow keys navigation Material UI ReactJS?
- How to pass event into javascript function with React?
- Reactjs Empty State when Page Load
- How to disable `deselect-option` in `react-select`?
- Accessing cart.order_items.length gives TypeError: Cannot read property 'length' of undefined
- Content editable is writing on the wrong direction when it has an value
- How to mock Publish/subscribe events on React Components when using PubSubJS with Jest/Enzyme?
- How to filter an array items stored in object
- Set active cell when click on it in ReactJs
- Next.js: Change Div color of header depending on active pgae