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

Comments

Mohamed Atef Date : 2021-09-30

Best answers

46

Best answers

46

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

Hello, 

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

React Redux : Connect is not called
Publish date: 2022-03-02 | Comments: 1

Tag: React js

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

Tag: React js

[solved] Reactjs is not updating the props
Publish date: 2022-02-04 | Comments: 2

Tag: React js

React usestate array map() is not working
Publish date: 2022-04-22 | Comments: 3

Tag: React js

TypeError: Super expression must either be null or a function
Publish date: 2022-03-13 | Comments: 2

Tag: React js