Implementing the React Router into a ReactJS project: Methods to prevent users from clicking on links within React-Router's <Link> component

I'm exploring React-Router's Link and have set up the following:

<Link to={...}>{this.props.live? "Live": "Not Live"}</Link>

In this configuration, if this.props.live is present, I want to display the text "Live" which will lead to a new page. However, if this.props.live is not passed in, I aim to show the text "Not Live" but without an active hyperlink attached. Is there a way to achieve this effect? I attempted using 

<div style={{pointerEvents: "none"}}>Not Live</div>
, but it did not yield the desired outcome.

If you have any insights or solutions to this problem, please share them with me. Your help is greatly appreciated, and I will be sure to upvote and accept the answer that best addresses this issue. Thank you!

javascripthtmlcssreactjsreact-router

Answer №1

Here is a suggestion for you:

let element;

element = this.props.live ? <Link to={...}> Live </Link> : <div> Not Live </div>
 render() {
    {element}
  }

Cheers and happy coding!

Answer №2

if(this.state.isLive)
    ? <Link to={...}> Watch now Live </Link>
    : <div> Currently offline </div>

Answer №3

To prevent the page from redirecting, you can use evt.preventDefault()

class MyComponent extends React.Component {
  constructor(props) {
    this.handleLinkClick = this.handleLinkClick.bind(this);
  }
  handleLinkClick(evt) {
    if (!this.props.live) {
      evt.preventDefault(); // stops redirection
    }
  }
  render() {
    <Link onClick={this.handleLinkClick} to={...}>
      {this.props.live? "Live": "Not Live"}
    </Link>
  }
}

A shorter but debated version

<Link onClick={evt => !this.props.live && evt.preventDefault()} to={...}>
  {this.props.live? "Live": "Not Live"}
</Link>

Refer to the API documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS to Rearrange Columns Depending on Screen Size

Check out the progress on this page: If you scroll to the bottom, you'll find a list of links - displayed in 4 columns in the regular view. When you resize the screen, they shift into a single column. I want them to show as a single column on an iPh ...

htmlcss

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

javascriptjqueryhtmlcssdynamic

Extracting the id of an element using jQuery

The desired outcome is for the code to print the id of the selected div, but it's not working as expected. I've reviewed it multiple times but couldn't pinpoint the error. Any assistance would be greatly appreciated. Here is the HTML: < ...

javascriptjqueryhtml

Is it possible to utilize the HTML5 browser storage on multiple domains simultaneously?

When considering options for HTML5 browser storage such as IndexedDB or Web Storage, it's important to note that the "same origin policy" applies based on what is stated in the specification. Is there a method to store data within the browser that ca ...

htmlstoragelocal-storagesame-origin-policy

Leverage variables in Ajax to retrieve the data of an HTML element

Seeking assistance in converting multiple lines into a single for loop. var optie1 = ""; if($('#form #optie1_check').is(':checked')) { optie1 = $('#form #optie1_naam').val(); } var optie2 = ""; if($('#form #optie2_ch ...

javascriptjqueryajax

Using addClass and fadeIn simultaneously when hovering over an element

After writing JavaScript code that utilizes the JQuery library to swap classes on hover, I noticed that the transition between background images was quite abrupt. The code functions as intended, but I would prefer to incorporate a fadeIn and fadeOut effect ...

javascriptjquery

Dynamic Images with Next.js

Currently, I am utilizing next.js and attempting to dynamically retrieve images in the following manner: {list.map((prod) => ( <div className={styles.singleProduct}> <h6>{prod.Brand.toUpperCase()}</h6> <p&g ...

javascriptnext.js

The concept of shallow routing in Next.js

I have a complex form with multiple steps and I want the path to change based on the current step of the form. After some research, I came across shallow routing as a potential solution for this issue. To implement this, I added a Router and an increase fu ...

reactjsnext.js

Navigating a JSON object using jQuery

My current project involves sending a Json response to an Ajax function within my webpage. The structure of the Json response is as follows: {"one": 21, "two": 10, "three": 19, "four": 100} With this setup in place, I am now in the process of developing ...

javascriptjqueryjsonajax

Trigger animation once you've scrolled past a designated point in the document

I created a count-up counter animation using JavaScript, but the issue is that the counter starts animating as soon as I refresh the page regardless of where I am on the page or if the counter is even visible. I would like the counter to only start workin ...

javascripthtml

The continuous rerendering of my component occurs when I use a path parameter

In my project, I am working on utilizing a path parameter as an ID to fetch data for a specific entity. To accomplish this, I have developed a custom data fetching hook that triggers whenever there is a change in the passed parameters. For obtaining the bo ...

reactjstypescriptreact-hooksreact-routerreact-router-dom

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

javascriptjqueryhtmlcss

React JS hosted externally along with just plain Javascript and HTML page

We are looking to implement a common widget on multiple services using ReactJS. The goal is to write client-side code for this widget as an external hosted JavaScript file that can be included in pages across different frameworks such as Angular, Inferno, ...

reactjstypescript

CSS code for creating thumbnail images that enlarge when hovered over

I currently have a series of thumbnails in a row (within container elements) set to float left. These thumbnails are resized to fit neatly within the row. <style type="text/css"> .thumbnails{ float:left; position:relative; } ...

csspopupmouseover

Take advantage of the usePagination custom hook in conjunction with Material-UI by incorporating the next and prev functions as props within

Utilizing a custom hook for pagination with material-ui has been successful, displaying the first page properly. However, there are issues when trying to call next(), prev(), and jump(). Passing next={next} as props was attempted, but without success. The ...

reactjspaginationmaterial-uireact-hooks

How can I prevent SweetAlert from automatically focusing when it first opens?

I recently integrated SweetAlert into my project and customized the buttons like this: swal("A wild Pikachu appeared! What do you want to do?", { buttons: { cancel: "Run away!", catch: { text: "Throw Pokéball!", value: "catch", ...

javascriptsweetalert

Encountering a CORS issue when trying to deploy a MERN Stack application on VERCEL for both the client and server components

I successfully deployed both the client and server code on Vercel. The registration process involves sending email IDs and other information from the client side to the server side, where they are stored in an online MongoDB Atlas database. However, I enco ...

node.jsreactjsexpressdeploymentmern

Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me. The specific problem I am facing is related to changing the background-color of the "Right Button Act ...

htmlcsscss-selectorszurb-foundation

What is the best way to transform the pages extracted through the Notion API into slugs?

I'm new to Next.js and Notion API, and I want to create a blog site on my personal website using the Notion API. While I can easily pull the posts, I am facing a challenge in slugifying the endpoint IDs with post titles. When attempting this based on ...

javascriptnext.jsnotion-apislugify

Accessing values from a JSON object in AngularJS without using a loop based on another field

Is there a way to extract the "value" associated with the "name" in JSON using Angular JS without having to iterate through the array? For instance, if I have an array like the one below with name and value fields, how can I retrieve the value "ABC" based ...

javascriptjsonangularjs