প্রস্তাবিত পদ্ধতি ব্যবহার করে: এটি ফলাফল: বোতামের একটি লিঙ্ক , মন্তব্য লাইনের মধ্যে কোড
আমি ভাবছিলাম যে কোনও প্রতিক্রিয়া ব্যবহার করে কোনও এইচটিএমএল ট্যাগ Linkথেকে কোনও উপাদান মোড়ানোর কোনও উপায় আছে কিনা ।'react-router'button
আমার কাছে বর্তমানে Linkআমার অ্যাপ্লিকেশনটিতে পৃষ্ঠাগুলি নেভিগেট করার উপাদান রয়েছে তবে আমি সেই কার্যকারিতাটি আমার এইচটিএমএল বোতামে ম্যাপ করতে চাই।
উত্তর:
এই একটি ওয়েব ব্রাউজারে রেন্ডার হবে, যে হুঁশিয়ার:
⚠️ একটি HTML পাখির buttonএকটি HTML এ a(অথবা বিপরীতভাবে) বৈধ HTML নয় ⚠️। আপনি যদি স্ক্রিন পাঠকদের কাছে আপনার এইচটিএমএল অর্থপূর্ণ রাখতে চান তবে অন্য একটি পদ্ধতির ব্যবহার করুন।
বিপরীত পথে মোড়ক করুন এবং আপনি লিঙ্কটি সংযুক্ত করে আসল বোতামটি পাবেন। কোনও সিএসএস পরিবর্তন দরকার নেই।
<Link to="/dashboard">
<button type="button">
Click Me!
</button>
</Link>
এখানে বোতামটি এইচটিএমএল বোতাম। এটি তৃতীয় পক্ষের লাইব্রেরিগুলি যেমন সিনেম্যাটিক-ইউআই-প্রতিক্রিয়া থেকে আমদানিকৃত উপাদানগুলির ক্ষেত্রেও প্রযোজ্য ।
import { Button } from 'semantic-ui-react'
...
<Link to="/dashboard">
<Button style={myStyle}>
<p>Click Me!</p>
</Button>
</Link>
<a href="">এবং অ্যাঙ্কার ট্যাগে বোতাম ট্যাগ থাকতে পারে না।
history.pushবিকল্পটির সাথে তুলনা করার সময় এই হ্যাকি সমাধানটি ব্যবহার করার সত্যিই কোনও কারণ নেই
LinkButton উপাদান - প্রতিক্রিয়া রাউটার ভি 4 এর একটি সমাধানপ্রথমত, এই প্রশ্নের আরও অনেক উত্তর সম্পর্কে একটি নোট।
<button>এবং <a>বৈধ এইচটিএমএল নয়। ⚠️এখানে যে কোনও উত্তর যা buttonপ্রতিক্রিয়া রাউটার Linkউপাদান (বা তদ্বিপরীত) একটি এইচটিএমএল নীড় বাঁধার পরামর্শ দেয় একটি ওয়েব ব্রাউজারে রেন্ডার করে তবে এটি শব্দার্থ, অ্যাক্সেসযোগ্য বা বৈধ এইচটিএমএল নয়:
<a stuff-here><button>label text</button></a>
<button><a stuff-here>label text</a></button>
☝ validator.w3.org সঙ্গে এই মার্কআপ যাচাই করতে ক্লিক করুন ☝
বোতামগুলি সাধারণত লিঙ্কগুলির অভ্যন্তরে না রাখায় এটি লেআউট / স্টাইলিংয়ের সমস্যার দিকে নিয়ে যেতে পারে।
<button>প্রতিক্রিয়া রাউটার <Link>উপাদান সহ একটি এইচটিএমএল ট্যাগ ব্যবহার করা ।আপনি যদি কেবল এইচটিএমএল buttonট্যাগ চান ...
<button>label text</button>
… তারপরে, এখানে একটি বোতামটি পাওয়ার জন্য সঠিক উপায় যা প্রতিক্রিয়া রাউটারের Linkউপাদানটির মতো কাজ করে ...
এই উপাদানগুলি আপনার উপাদানগুলিতে প্রেরণ করতে রাউটারের সাথে রাউটারের সাথে প্রতিক্রিয়া ব্যবহার করুন :
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>এইচটিএমএল ট্যাগকে "বোতাম" এর মতো দেখতে দৃষ্টিবদ্ধ স্টাইলযুক্ত করে থাকে তবে হ্যাঁ @ চেসেজেমস সমাধান এটি অর্জন করে। উপরের প্রশ্নটি একটি <button>এইচটিএমএল উপাদান কীভাবে ব্যবহার করবেন তা জিজ্ঞাসা করে <a>।
কেন কেবল একটি বোতামের মতো একই CSS এর সাথে লিংক ট্যাগটি সাজাবেন না।
<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বাধ্যতামূলক।
প্রতিক্রিয়া-রাউটার v5.1.0 থেকে আপনি useHistory হুক ব্যবহার করতে পারেন ।
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(বা প্রতিস্থাপন) ব্যবহার করুন Whether
⚠️ না, এইচটিএমএল (বা তদ্বিপরীত) একটি এইচটিএমএল বাসা বেড়ানো এইচটিএমএল নয়buttona
widthএবং height।
styled-components। github.com/styled-components/styled-components
প্রতিক্রিয়া 16.8+ ( হুকস ) এবং প্রতিক্রিয়া রাউটার 5 ব্যবহার করে যে কেউ সমাধান খুঁজছেন তাদের জন্য :
আপনি নিম্নলিখিত কোড সহ একটি বোতাম ব্যবহার করে রুটটি পরিবর্তন করতে পারেন:
<button onClick={() => props.history.push("path")}>
প্রতিক্রিয়া রাউটার আপনার উপাদানগুলিতে কিছু প্রপস সরবরাহ করে, ইতিহাসে পুশ () ফাংশন সহ যা <লিঙ্ক টু = 'পথ'> উপাদানটির মতো বেশ কাজ করে works
এই প্রপসগুলিতে অ্যাক্সেস পাওয়ার জন্য আপনার উপাদানগুলি উচ্চতর অর্ডার কম্পোনেন্ট "উইথ রউটার" দিয়ে মোড়ানোর দরকার নেই।
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 এর জন্য আপডেট:
এখানে বিভিন্ন উত্তরগুলি প্রতিক্রিয়া-রাউটারের বিবর্তনের সময়রেখার মতো 🙂
প্রতিক্রিয়া-রাউটার ভি 6 এর সর্বশেষতম হুক ব্যবহার করে, এটি এখন useNavigateহুক দিয়ে সহজেই করা যায় ।
import { useNavigate } from 'react-router-dom'
function MyLinkButton() {
const navigate = useNavigate()
return (
<button onClick={() => navigate("/home")}>
Go Home
</button>
);
}
সমাধানগুলির মধ্যে অনেকগুলি জটিল বিষয়গুলিতে মনোনিবেশ করেছে।
উইথ রউটার ব্যবহার করা কোনও বোতামের মতো সাধারণ কোনও কিছুর জন্য একটি দীর্ঘ দীর্ঘ সমাধান যা অ্যাপের অন্য কোথাও লিঙ্ক করে।
আপনি যদি এসপিএ (একক পৃষ্ঠার অ্যাপ্লিকেশন) এর জন্য যাচ্ছেন তবে আমি সবচেয়ে সহজ উত্তরটি পেয়েছি বোতামের সমতুল্য শ্রেণীর নামটি ব্যবহার করা।
এটি নিশ্চিত করে যে আপনি নিজের সম্পূর্ণ অ্যাপ্লিকেশনটি পুনরায় লোড না করেই ভাগ করা রাষ্ট্র / প্রসঙ্গটি বজায় রেখেছেন
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';।