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

Is there a way to clear out all items from the cart using PHP?

I have a shopping cart with items that I want to remove all at once. I tried creating a submit button with the post method called 'remove_all', but it's not working and showing an error message saying "The requested URL was not found on this ...

phphtmlsession-cookiessession-variables

retrieve the height value of a div element using AngularJS

I'm having trouble retrieving the updated height of a div using AngularJS. It seems to only provide the initial value and does not update as expected: vm.summaryHeight = $(".history-log-container").height(); console.log(vm.summaryHeight);//always dis ...

cssangularjs

Managing the verification of data existence in the ExpressJS service layer or controller

Working on a medium-sized website, I realized the importance of writing maintainable code with a better project structure. After stumbling upon this insightful article and some others discussing the benefits of 3-layer architecture, I found the concept qu ...

javascriptnode.jsexpress

Implementing a Search Box feature in React-leaflet version 3.1.0

Struggling to incorporate a searchbox feature into my react app. Encountering the error message "Attempted import error: 'MapControl' is not exported from 'react-leaflet'" with the latest version of react-leaflet. import { MapContainer, ...

javascriptreactjsleafletreact-leaflet

Is it possible to utilize PHP for creating mobile applications in order to submit HTML forms via email?

Currently exploring the creation of an HTML app with Cordova. I have experience creating forms for websites and using PHP to send form submissions via email. However, I am unsure if I can use PHP in my app for this purpose. Are there any resources or art ...

phphtmlcordovaemailcross-platform

Set the Checkbox selections by utilizing the array values in the MUI DataGrid

In my MUI Datagrid, I have 2 columns for ID and City Name. There are only 3 cities represented in the table. Within a citizen object like this: const userMockup = { id: 1, name: "Citizen 1", cities: [1, 2], isAlive: true }; The cities ar ...

javascriptreactjscheckboxmaterial-uidatagrid

Gather and consolidate all files into a single file using Node.js / JavaScript

I currently have 3 JSON files located in my project/Folder file1.json { "id":"01", "name":"abc", "subject":[ "subject1":"Maths", "subject2":"Science" ...

javascriptnode.jsjsonnodes

Prevent encountering the error message "Cannot read property of undefined" while mapping data

When I retrieve data from the Google Books API, I need to transform it into a more manageable array for further processing. To achieve this, I am using the following code snippet: data.items.map(function(book) { return { googleId : book.id, image : book ...

javascriptangularjsobject

Break apart animation similar to the 🎊 emoji using CSS styling

I am attempting to create an animation of a circle splitting open on two sides, similar to the ...

htmlcsscss-animations

What is the method to query by slug in GraphQL? - An error occurred stating 'Unknown argument "slug" on the field "article"'

As I explore GraphQL playground, I am attempting to create a query that will fetch an article based on its slug. In my backend setup with Strapi, I have defined an 'Article' type with a text field named 'slug'. While I can retrieve arti ...

node.jsreactjsgraphqlslugstrapi

Customizing the width of the JQuery $ui.progressbar by overriding its properties

After spending some time, I successfully overrode the function that controls the width of the progress bar element in the jQuery UI widget version 1.12.1 from September 14, 2016. Initially, I needed the progress bar to completely fill a column in a table. ...

javascriptjqueryhtmlcssjquery-ui

Mastering Data Transfer in jQuery: A Guide to Migrating Event Information from .on(dragstart) to

I need help with transferring information between an .on(dragstart) event and an .on(drop) event. However, when I run the code below in Chrome, I encounter an error message: 'Uncaught TypeError: Cannot read property 'test' of undefined' ...

javascripthtmljquery

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

Here is the issue I'm facing (notice how the yellow tiles are overflowing): (view image here) because my reputation points are not enough. The screenshot above illustrates how the small yellow rectangles are extending beyond the boundaries of the gr ...

htmlcsslayout

Transferring information via onSubmit from React to Node.js

In my React script, I have an onSubmit function that is triggered when the submit button is clicked: const handleSubmit = (event) => { event.preventDefault(); const form = event.target; const rawdata = new FormData(form); const data = { email: rawda ...

node.jsreactjsexpresspassport.js

Developing a hovercard/tooltip feature

I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...

jqueryhtmlcssajax

update value asynchronously

My implementation involves a dialog controller: .controller('loadingDialogCtrl', function($scope, $mdDialog, $rootScope, loadingDialog) { $scope.loadingDialog = loadingDialog; }); In another controller, I use the dialog controller and manip ...

javascriptangularjsangular-material

Solving the esLint error "Assignment to property of function parameter" triggered by React JS .map method and assignment

I'm currently grappling with resolving an esLint error that reads as follows: 'Assignment to property of function parameter. eslint(no param-reassign)' Here's the snippet of my code causing the issue: myArray.records.map(record => ...

reactjseslint

AngularJS: Updating data in controller but not reflecting in the HTML view

Within my AngularJS app, I've come across the following code: example.html <div> <p>{{name}}</p> </div> <div> <button ng-click="someFunction()"></button> </div> exa ...

javascriptangularjshtmlangularjs-scope

Next.JS is efficiently compressing images into base64 format, resulting in an empty image

I recently uploaded a pizza.jpg image to Cloudflare Pages and embedded it into a (.jsp file) page. <div className="product_img"> <Image src={'pizza.jpg'} loader={localLoader} alt={'Pizza'} width='300' he ...

reactjsnext.js

Nested Angular click events triggering within each other

In my page layout, I have set up the following configuration. https://i.stack.imgur.com/t7Mx4.png When I select the main box of a division, it becomes highlighted, and the related department and teams are updated in the tabs on the right. However, I also ...

javascripthtmlangular