React-router-dom : Is it possible to use Link without routing the user to another page?

user_8965420 0
Viewed 6102

I have this table: 

<Table hover bordered striped responsive size="sm">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Date et heure d'ajout</th>
                </tr>
              </thead>
              <tbody>
                {this.state.fichierJointsInformation.map(
                  (operationSavInformation, i) => {
                    return (
                      <tr key={i}>
                        <td>
                          <Link
                            to={""}
                            onClick={this.onFichierJointLinkClicked}
                          >
                            {operationSavInformation.nomFichierOriginal}
                          </Link>
                        </td>
                        <td>{operationSavInformation.createdAt}</td>
                      </tr>
                    );
                  }
                )}
              </tbody>
            </Table>

It is rendered like this:
enter image description here

What I am trying to implement: When the user clicks on any element of the first column, the associated file gets downloaded.
So the onFichierJointLinkClicked onClick listener, will take care of the API request and everything else. 

<Link
                        to={""}
                        onClick={this.onFichierJointLinkClicked}
                      >
                        {operationSavInformation.nomFichierOriginal}
                      </Link>

MY PROBLEM: The to prop in LINK is required. However, I don't want to route the user to any other page. I just want the onFichierJointLinkClicked to be triggered.

If I remove the to prop, I get this error obviously: 

index.js:1 Warning: Failed prop type: The prop `to` is marked as required in `Link`, but its value is `undefined`.
react-router-dom reactjs html javascript
3 Answers

Try to put # i.e. to="#", as I am doing. And it is working fine for me -

Please see - 

<div className="pagination alternate pull-right">
  <ul>
    <li className={props.prevPage == null ? 'disabled' : ''}>
      <NavLink
        to="#"
        onClick={() => props.gotoPage(props.prevPage, props.noOfPages)}
      >
        Prev
      </NavLink>
    </li>
    {links}
    <li className={props.nextPage == null ? 'disabled' : ''}>
      <NavLink
        to="#"
        onClick={() => props.gotoPage(props.nextPage, props.noOfPages)}
      >
        Next
      </NavLink>
    </li>
  </ul>
</div>
user_78438280

it seems, you no longer need a Link, set a style for your td element to behave like a link, and attach the onClick event listener

i tried to reproduce a bit your need here

App.js

import React from "react";
import { Table } from 'react-bootstrap';
import "./styles.css";



export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Table hover bordered striped responsive size="sm">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Date et heure d'ajout</th>
                </tr>
              </thead>
              <tbody>
                  <tr>
                    <td className="likeALink" onClick={() => console.log("your custom function")}>
                        something
                    </td>
                    <td>something else</td>
                  </tr>
              </tbody>
            </Table>
      
    </div>
  );
}
.App {
  font-family: sans-serif;
  text-align: center;
}

.likeALink:hover {
  text-decoration: underline;
}

.likeALink {
  color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

user_127105750

Just replace your Link with a custom div, then style it with a little bit of css (cursor: pointer, color, :hover:...)

Then in your onFichierJointLinkClicked, open your pdf in another window like this: 

window.open(path, '_blank');
user_64768890
Related