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:
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`.
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:
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`.
-
1
Why can't you use a normal
<button>and style it to look like a link? – apokryfos Commented Apr 8, 2020 at 9:26 - @apokryfos didn't think of that cuz a button well, it's a button not a link. – AG_HIHI Commented Apr 8, 2020 at 9:29
- Also, the links in my app have a particular appearance and I need them all to look the same even if this one won't redirect to another page – AG_HIHI Commented Apr 8, 2020 at 9:30
-
2
The problem here is that a
<Link>ponent is not any old link but a react router link which has a specific purpose. What you're describing can be an anchor link with the download attribute (e.g.<a href=X download>...</a>) or can be a callback triggered by clicking a button. The only issue is visual so you will need to find a way to apply the same styling to the<Link>as well as your download link/button. – apokryfos Commented Apr 8, 2020 at 9:45 - Okay, thanks for the detailed response – AG_HIHI Commented Apr 8, 2020 at 9:49
3 Answers
Reset to default 9Try 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>
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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>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');