score:6
try to use the tab component of material-ui with the to
props and component={link}
props. don't forget the import { link } from 'react-router-dom';
<appbar position="static">
<tabs
variant="fullwidth"
value={value}
onchange={handlechange}
aria-label="nav tabs example"
>
<tab component={link} label="page one" to="/drafts" {...a11yprops(0)} />
<tab component={link} label="page two" to="/trash" {...a11yprops(1)} />
</tabs>
</appbar>
<tabpanel value={value} index={0}>
page onee
</tabpanel>
<tabpanel value={value} index={1}>
page two
</tabpanel>
it works fine for me
score:2
to anyone viewing this question down the road, if you're running into the same issue as kislay kunal try this link instead: material-ui's tabs integration with react router 4?
the gist is that unless you tie the browser state into your material ui tab state the tabs will change the url path, but specifying the path won't navigate you to the correct tab. so basically just take mickael muller's example and replace value
with this.props.history.location.path
like this
<appbar position="static">
<tabs
variant="fullwidth"
value={this.props.history.location.path}
onchange={handlechange}
aria-label="nav tabs example"
>
<tab component={link} label="page one" to="/drafts" {...a11yprops(0)} />
<tab component={link} label="page two" to="/trash" {...a11yprops(1)} />
</tabs>
</appbar>
<tabpanel value={this.props.history.location.path} index={0}>
page onee
</tabpanel>
<tabpanel value={this.props.history.location.path} index={1}>
page two
</tabpanel>
Source: stackoverflow.com
Related Query
- is it possible to use material ui tabs and still use react router?
- Material UI (Scrollspy) - React - use tabs to move through list and auto scroll to index
- Keeping Material UI tabs and React Router in sync
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- Is it possible to use Material UI library with React Native?
- How to use Apollo Client + React Router to implement private routes and redirection based on user status?
- How to use React Router with Material UI Drawer to change content on click?
- React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering
- React router use in library - not possible to use useHistory()
- what is the best way to use react router V6 navigation with redux and redux thunk actions?
- Can you use React smooth scroll and React Router Links in the same website?
- Can I safely use both the "to" and "onClick" props on a React Router Link?
- Is it possible to use MaterialUI with React and css modules and access the theme inside the css module file?
- React Router - can't use MATCH PARAMS and app state in route
- How do I use react router and react scroll on the same button?
- Use onChange in Material UI tabs handleChange function in React component
- React Router - route using MemoryRouter and Router together (Some links use memory while others change the url)
- How to use Typescript with React Router and match
- is it possible to change the initial state of reducer after state changed and use it ? React
- Is it possible to use redux and axios in react component library?
- Use React router and CSSTransitionGroup caused errors
- Move method from one component to another in React and still be able to use in original
- React Material UI: this.props undefined when using withStyles and React Router
- React router v6 using javaScript objects and material-ui tabs
- How can I use React context to get the router exactly and only where I need it?
- Routes not working in react even when trying to use Routes and Router
- Is it possible to use the value path of React Router in the component?
- How can I use React Router to nest some routes? And I want to keep a header component
- React Redux router saga material-ui and tabs corresponding to current route
- React + Google Maps + Material UI: Is it possible to use React components inside an InfoWindow?
More Query from same tag
- How to pass array objects or store them in reducer using interface and how does filter works on it?
- UseQuery graphql -> useState with useEffect such that I can run second useEffect to set more state
- Updating react typings; Unable to find 'react' in the registry
- I have to press a button twice to fill react state from firebase realtime database
- State in React component not setting data when the browser (tab) is refreshed
- Can touch out side a View Component be detected in react native?
- Trigger React Pikaday calendar from an icon onClick
- Add/remove form inputs dynamically
- How do I test a react hook method?
- How to implement a social media feed using MERNG?
- $ yarn install leads to Cannot find module yarn-berry.js
- Attach custom headers before every fetch request in react
- Update property in a component from parent-child component
- Div doesn't Hide on Safari Tailwind CSS
- Amplitude with React and Typescript
- How do I get the IDs from firestore into the object arrays?
- Error: React-Table: Could not find a column with id:
- How can I make my div tab to disabled cannot click in
- How can I send image from client to server node js react
- How to add rowClassName to a particular row in antd table on onClick of the row and not after onMouseLeave
- React Typescript Redux-Toolkit - integrate redux state with existing ES2015 Classses based React Component
- React-router causes Cannot read property 'listen' of undefined
- How to make a second api call with data received from the first api call in Apollo client with React?
- Increase min-width of item - material ui (custom component)
- How to groud data array from backend by date Month
- Why "0" is rendered on short-circuit evaluation of `array.length && ...`
- Disable create-react-app webpack hot/live reload at runtime
- React lazy/Suspens + React Router dont change route until component is fetched
- How to pass data from parent component to child after creation of child?
- Iterate through Object of arrays in react js