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

30 Sep 2021

Best Answer

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

31 Jan 2022

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.

Replies

Mohamed Atef

31 Jan 2022

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