सुझाई गई विधि का उपयोग करना: यह परिणाम है: बटन में एक लिंक , टिप्पणी लाइनों के बीच कोड
मैं सोच रहा था कि क्या प्रतिक्रिया का उपयोग करके HTML टैग में एक Linkतत्व को लपेटने का कोई तरीका है ।'react-router'button
वर्तमान Linkमें मेरे ऐप में पृष्ठों को नेविगेट करने के लिए मेरे पास घटक हैं, लेकिन मैं उस कार्यक्षमता को अपने HTML बटन पर मैप करना चाहूंगा।
जवाबों:
यह एक वेब ब्राउज़र में प्रस्तुत करना होगा, कि सावधान रहना:
⚠️ एक एचटीएमएल घोंसले के शिकार buttonएक html में a(या इसके विपरीत) मान्य एचटीएमएल नहीं है ⚠️। यदि आप अपने html अर्थ को स्क्रीन पाठकों के लिए रखना चाहते हैं, तो दूसरे दृष्टिकोण का उपयोग करें।
रिवर्स तरीके से रैपिंग करते हैं और आपको लिंक के साथ मूल बटन मिलता है। कोई सीएसएस परिवर्तन की आवश्यकता नहीं है।
<Link to="/dashboard">
<button type="button">
Click Me!
</button>
</Link>
यहाँ बटन HTML बटन है। यह सेमेटिक-यूआई-रिएक्ट जैसे तीसरे पक्ष के पुस्तकालयों से आयातित घटकों पर भी लागू होता है ।
import { Button } from 'semantic-ui-react'
...
<Link to="/dashboard">
<Button style={myStyle}>
<p>Click Me!</p>
</Button>
</Link>
<a href="">और एंकर टैग में बटन टैग नहीं हो सकता है।
history.pushविकल्प की तुलना में वास्तव में इस घिनौने समाधान का उपयोग करने का कोई कारण नहीं है
LinkButton घटक - रिएक्टर राउटर v4 के लिए एक समाधानसबसे पहले, इस प्रश्न के कई अन्य उत्तर के बारे में एक नोट।
<button>और <a>वैध HTML नहीं है। ⚠️यहां कोई भी उत्तर जो buttonएक रिएक्टर राउटर Linkघटक (या इसके विपरीत) में एक html को घोंसले में डालने का सुझाव देता है, एक वेब ब्राउज़र में प्रस्तुत करेगा, लेकिन यह शब्दार्थ, सुलभ या मान्य HTML नहीं है:
<a stuff-here><button>label text</button></a>
<button><a stuff-here>label text</a></button>
Up इस मार्कअप को validator.w3.org के साथ मान्य करने के लिए क्लिक करें ate
यह लेआउट / स्टाइलिंग मुद्दों को जन्म दे सकता है क्योंकि बटन आमतौर पर लिंक के अंदर नहीं रखे जाते हैं।
<button>React Router <Link>घटक के साथ HTML टैग का उपयोग करना ।यदि आप केवल एक html buttonटैग चाहते हैं ...
<button>label text</button>
... तो, यहाँ एक बटन है कि प्रतिक्रिया रूटर के Linkघटक की तरह काम करता है पाने के लिए सही तरीका है ...
इन प्रॉप्स को अपने कंपोनेंट में पास करने के लिए React Router के withRouter HOC का उपयोग करें :
historylocationmatchstaticContextLinkButton अंगयहां LinkButtonआपको कॉपी / पास्ता के लिए एक घटक दिया गया है :
// file: /components/LinkButton.jsx
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'
const LinkButton = (props) => {
const {
history,
location,
match,
staticContext,
to,
onClick,
// ⬆ filtering out props that `button` doesn’t know what to do with.
...rest
} = props
return (
<button
{...rest} // `children` is just another prop!
onClick={(event) => {
onClick && onClick(event)
history.push(to)
}}
/>
)
}
LinkButton.propTypes = {
to: PropTypes.string.isRequired,
children: PropTypes.node.isRequired
}
export default withRouter(LinkButton)
फिर घटक आयात करें:
import LinkButton from '/components/LinkButton'
घटक का उपयोग करें:
<LinkButton to='/path/to/page'>Push My Buttons!</LinkButton>
अगर आपको ऑनक्लिक विधि की आवश्यकता है:
<LinkButton
to='/path/to/page'
onClick={(event) => {
console.log('custom event here!', event)
}}
>Push My Buttons!</LinkButton>
अद्यतन: यदि आप ऊपर लिखे जाने के बाद उपलब्ध किए गए किसी अन्य मज़ेदार विकल्प की तलाश कर रहे हैं, तो इस उपयोगपत्री हुक की जाँच करें ।
<div> .. </divतत्व के अंदर जाना होगा App.js?
import IconButton from '@material-ui/core/IconButton';किया और इसके बजाय इसका उपयोग किया <button />और इसने बहुत अच्छा काम किया।
<a>"बटन" की तरह दिखने के लिए html टैग नेत्रहीन स्टाइल है, तो हाँ @CamesJames समाधान इसे प्राप्त करता है। ऊपर दिया गया सवाल यह है कि <button>html एलिमेंट का उपयोग कैसे किया जाए , नहीं <a>।
क्यों नहीं एक बटन के रूप में एक ही सीएसएस के साथ लिंक टैग को सजाने के लिए।
<Link
className="btn btn-pink"
role="button"
to="/"
onClick={this.handleClick()}
>
Button1
</Link>
यदि आप उपयोग कर रहे हैं react-router-domऔर material-uiआप उपयोग कर सकते हैं ...
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';
<Button component={Link} to="/open-collective">
Link
</Button>
आप यहां और पढ़ सकते हैं ।
toप्रोपर Linkअनिवार्य है।
आप उपयोग कर सकते हैं useHistory हुक के बाद सेप्रतिक्रिया-राउटर v5.1.0 के ।
useHistoryहुक आप इतिहास उदाहरण के लिए पहुँच है कि आप नेविगेट करने के लिए उपयोग कर सकते हैं देता है।
import React from 'react'
import { useHistory } from 'react-router'
export default function SomeComponent() {
const { push } = useHistory()
...
<button
type="button"
onClick={() => push('/some-link')}
>
Some link
</button>
...
}
मैं राउटर और <बटन /> का उपयोग करता हूं। नहीं <लिंक />
<Button onClick={()=> {this.props.history.replace('/mypage')}}>
HERE
</Button>
onClick={ () => navigateTo(somePath) }इस दृष्टिकोण का उपयोग कर सकता है। चाहे आपके उत्तर में रेडक्स और import {push} from 'connected-react-router'या बस history.push(या प्रतिस्थापित) का उपयोग कर रहे हों ।
widthऔर height।
styled-components। github.com/styled-compenders/styled-compenders
रिएक्ट 16.8+ (हुक) और रिएक्ट राउटर 5 का उपयोग कर समाधान की तलाश में किसी के लिए :
आप निम्न कोड वाले बटन का उपयोग करके मार्ग बदल सकते हैं:
<button onClick={() => props.history.push("path")}>
रिएक्ट राउटर आपके घटकों को कुछ प्रॉप्स प्रदान करता है , जिसमें इतिहास पर पुश () फ़ंक्शन भी शामिल है जो <लिंक से = 'पथ'> तत्व की तरह बहुत काम करता है।
उन प्रॉप्स तक पहुंचने के लिए आपको अपने घटकों को उच्च आदेश घटक "withRouter" के साथ लपेटने की आवश्यकता नहीं है।
BrowserRouterइसके बजाय अच्छे आकार में हैं जब तक कि आप (HTML इतिहास एपीआई पर आधारित) नियोजित करते हैं HashRouter।
स्टाइल घटकों के साथ यह आसानी से हासिल किया जा सकता है
पहले एक स्टाइल बटन डिज़ाइन करें
import styled from "styled-components";
import {Link} from "react-router-dom";
const Button = styled.button`
background: white;
color:red;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid red;
border-radius: 3px;
`
render(
<Button as={Link} to="/home"> Text Goes Here </Button>
);
अधिक के लिए स्टाइल घटक के घर की जाँच करें
प्रतिक्रिया रूटर संस्करण 6 के लिए अद्यतन:
यहाँ विभिन्न उत्तर प्रतिक्रिया-राउटर के विकास के समय की तरह हैं like
प्रतिक्रिया-राउटर v6 से नवीनतम हुक का उपयोग करना, यह अब useNavigateहुक के साथ आसानी से किया जा सकता है ।
import { useNavigate } from 'react-router-dom'
function MyLinkButton() {
const navigate = useNavigate()
return (
<button onClick={() => navigate("/home")}>
Go Home
</button>
);
}
कई समाधानों ने जटिल चीजों पर ध्यान केंद्रित किया है।
WithRouter का उपयोग करना एक बटन के रूप में सरल के रूप में कुछ के लिए एक बहुत लंबा समाधान है जो ऐप में कहीं और लिंक करता है।
यदि आप एसपीए (सिंगल पेज एप्लिकेशन) के लिए जा रहे हैं, तो मुझे जो सबसे आसान उत्तर मिला है वह बटन के समकक्ष क्लासनेम के साथ उपयोग करना है।
यह सुनिश्चित करता है कि आप अपने पूरे ऐप को फिर से लोड किए बिना साझा स्थिति / संदर्भ बनाए रख रहे हैं जैसा कि इसके साथ किया गया है
import { NavLink } from 'react-router-dom'; // 14.6K (gzipped: 5.2 K)
// Where link.{something} is the imported data
<NavLink className={`bx--btn bx--btn--primary ${link.className}`} to={link.href} activeClassName={'active'}>
{link.label}
</NavLink>
// Simplified version:
<NavLink className={'bx--btn bx--btn--primary'} to={'/myLocalPath'}>
Button without using withRouter
</NavLink>
import { Button } from 'react-bootstrap';।