score:1
this is my solution to keep the same button
style.
import { link, linkprops } from 'react-router-dom'
import button from '@material-ui/core/button'
const cardbutton: react.fc<linkprops> = ({ children, ...linkprops }) => (
<link style={{ textdecoration: 'none' }} {...linkprops}>
<button size="small" color="primary">
{children}
</button>
</link>
)
score:2
in cardactionarea
set component
prop to link
and to
to your desired url. this way you can use browser's back and forward button to navigate in your react application.
for example:
import { link } from "react-router-dom";
import {
card,
cardactionarea,
cardcontent,
typography,
} from "@mui/material";
<card>
<cardactionarea
component={link}
to="your-url"
>
<cardcontent>
<typography variant="h5">
card title
</typography>
<typography variant="body2" color="text.secondary">
card description
</typography>
</cardcontent>
</cardactionarea>
</card>
score:4
from the documentation cardactionarea
takes two props classes and children, add the link as a child.
<cardactionarea component="div" disableripple>
<link to="/blog">
<cardmedia
classname={classes.media}
image="images/marmik.jpg"
title="marmik desai"
/>
<cardcontent>
<typography gutterbottom variant="h5" component="h2">
marmik desai
</typography>
<typography variant="body2" color="textsecondary" component="p">
i am front end developer.
</typography>
</cardcontent>
</link>
</cardactionarea>
score:5
you can using like this, put you cardactionarea
component in link
return (
<card classname={classes.root}>
<link to="/blog" component={cardactionarea}>
<cardmedia
classname={classes.media}
image={props.thumbnail}
title={props.thumbnail}
/>
<cardcontent>
<typography gutterbottom variant="h6" component="h6">
{props.title}
</typography>
<typography variant='caption' component={"sm"}>
update at {(date(props.date).substring(0, 16))}
on {props.category}
</typography>
<divider />
<typography variant="body2" component="p">
{props.subtitle}
</typography>
</cardcontent>
</link>
<cardactions>
{!props.isadmin && <link to={props.admin_url} component={button} size="small" >edit</link>}
<link to={props.public_url} component={button} size="small" >readmore</link>
</cardactions>
</card>
);
score:5
import { link as routerlink } from 'react-router-dom';
import { cardactionarea } from '@material-ui/core';
<cardactionarea component={routerlink} to={'/blog'}>
// ...
</cardactionarea >
Source: stackoverflow.com
Related Query
- Can I use react router Link with CardActionArea?
- Can not able to get the location state when opened with "open link in a new tab" in react router
- How can I use react router with a path of more than on / (no params)
- How can I use react router in nested page with "exact paramater" for my this scenario?
- how can I use react router with 'django'
- How can I use React Router in a page with multiple components?
- How can I have active nav link in React with React Router Dom but just on big screens until my breakpoints kick in?
- How can I use Multiple layouts with 404 page in React router
- how to use nav link in react with router and bootstrap style
- How to use React Router with Electron?
- How to use React Router with Laravel?
- How to use context api with react router v4?
- Can I use React Bootstrap with Next.js?
- History.push a link to a new tab with react router
- how can I use fs in react with electron?
- How can I use history.push('path') in react router 5.1.2 in stateful component?
- How to use React Router with Preact
- How can I change the color of a Link in React with Material-UI?
- Can not pass state with react router dom v6 beta, state is null
- Can you use Material-UI Link with react-router-dom Link?
- How can I use React with Google Places API, to display place markers on a Google map?
- can i use pug (ex-jade) with react framework?
- In React Native, How Can I Use KeyboardAvoidingView with a Modal in iOS?
- react router dom link with params dont allways work
- Testing React Router with Link
- React Router Link doesn't work with LeafletJS
- Can I use react with @spartacus framework?
- ReactJS- Use slug instead of Id in the URL with React router
- can i use the tsx extension for test files if using react with typescript
- How can I use bootstrap in react with rails
More Query from same tag
- styling ant design tab header to look like radio buttons
- React context state property is undefined
- In React component lifecycle methods, `this.context` is an empty Object
- Why can't I import "white" color from Material UI colors?
- How to use useEffect() to fetch data from an api in a useReducer() and useContext() state management setup?
- TypeError: firebase.firestore is not a function in react js and firebase app
- Router changes URL without changing the component
- Problem with alert after adding new value to the array in React.js
- How do I update the grapqhl cache with urql upon a mutation, where the initial query response does not include the required __typename?
- Within React, why am I not able to use nested arrow functions... Altough normal functions seem to work?
- React-nice-calendar is missing a year
- turning a validate function from if statements to a switch statements
- TypeError: Cannot read property 'single' of undefined in multer grid
- React array not mapping correctly
- React Hook Form using Controller, yup and Material UI - validation issue
- How to test a React component with multiple child components?
- I am trying to refactor This code to a functional component
- React navbar not working properly showing error
- Why is this React component rendering infinitely?
- Using querySelectorAll on a React component's children
- Reactjs problems when ajax data from json file
- Simply use React State Management with Router
- How to query mysql from google cloud sql instance in React
- Is it correct or good practice to use SWR together with Redux?
- React ref.current is null in useEffect cleanup function
- How do i call function in functional component - ReactJs
- Algolia Instantsearch - show real html content in react app
- Conditional Rendering React Bootstrap Columns Within Array Map
- React state change not recognized on first update
- Get rid of link underline from gatsbyjs