user image

Joseph Morgan
Published in : 2021-09-30

import link as router link from 'react-router-dom' Reactjs

React js

Is there is any way to make the Link Component from the Material UI works with Router, I am using this line to import it from the react router but it's not working for me

import link as router link from 'react-router-dom';

What i need to do is adding this text with links to the Component 

<Typography variant="body2" align=center> <Link href="/login">Sign-in</Link><Link href="/signup"> or sign-up to see the list</Link> </Typography>

Thanks in advance


Mohamed Atef Date : 2021-09-30

Best answers


Best answers


Hi Joseph it's possible to make the Link Component support the react router but you missed something,

import { Link as RouterLink } from 'react-router-dom';import { Link, Typography,} from '@material-ui/core';

then to the Link Component should be like this code below

<Typography variant="body2" align=center> <Link component={RouterLink} to="/login">Sign-in</Link><Link component={RouterLink} to="/signup"> or sign-up to see the list</Link></Typography>

just add component attribute and the value of this attr is the name of the imported class from the react-router-dom then use to="/route" instead of href

Good LUCK!

Michaela Lattenbergova Date : 2022-01-31


I was wondering how would this work with react-router-v6 ? I am currently upgrading my app from v5.1 to v6, using Link from @material-ui/core but clicking on the link in my app does not redirect to a new path.

Mohamed Atef Date : 2022-01-31

It should be the same, Can you check the console of the browser please ?

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Could not be processed as an image because it has an invalid content type
Publish date: 2021-12-08 | Comments: 0

Tag: React js

How to get the selected object in "Autocomplete material ui"?
Publish date: 2021-12-22 | Comments: 3

Tag: React js

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

How to use Datepick of Mui with Formik
Publish date: 2022-02-14 | Comments: 7

Tag: React js

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Publish date: 2022-04-02 | Comments: 2

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

Module not found: Can't resolve 'swiper' in Reactjs [Solved]
Publish date: 2021-10-03 | Comments: 1

Tag: React js