Is empty string valid value for React Link?

Question

I'm writing a React.js application where I want to use Link component from react-router package in order to conditionally redirect a user to another page. If some condition doesn't hold I set the to prop to empty string which works and doesn't cause page reload and the page stays in the exact same place it was. But I'm wondering if this is the best practice?

This is my solution:

import { Link } from 'react-router';

<Link to={condition === true ? '/some/other/url' : ''}>
    <div>
        my content
    </div>
</Link>

I don't see anything in the documentation regarding empty string input.

Answer 1

I've never linked something to nothing in HTML or React. That said, it seems you have few options:

Option 1 Conditionally render the div not the to attribute. If codition is true show Link with div if not show div with no Link. This is probably the more "common" way to do this. If your div is not as simple as 'My Content' I would move it into a functional Component. And use that component instead of <div>MyContent</div> shown below.

import { Link } from 'react-router';

{ condition ? 
   (
     <Link to='/some/other/url'>
      <div>My Content</div>
     </Link>
   ) : ( <div>My Content</div> )
} 

Option 2 Do what you did but use the # instead of an empty string.

import { Link } from 'react-router';

<Link to={condition === true ? '/some/other/url' : '#'}>
    <div>
        my content
    </div>
</Link>

Option 3 Disable the link if the condition is false.

import { Link } from 'react-router';

//a better name might be in order here
const handleLinkDisable = (e) => {
  const { condition }  = this.state; //just assuming it comes from state
  if(condition){ e.preventDefault(); }
}; 

<Link to='/some/other/url' onClick={handleLinkDisable}>
  <div>My Content</div>
</Link> 

Hope that helps.

Answer 2

to is a required prop for Link. If the url is empty better to hide the whole component:

   {
      condition && (
        <Link to={"/some/other/url"}>
          <div>my content</div>
        </Link>
      );
    }

If for some weird reason you need to have empty url, you can pass a space:

<Link to={condition === true ? '/some/other/url' : ' '}> // Whitespace here
    <div>
        my content
    </div>
</Link>

Answer 3

I just took a look at the latest documentation and I think I understand what is going on with an empty string for the to prop of a Link component. Since that is the question here, I will try to explain.

According to the docs, if the to value doesn't start with a slash (/) then it is considered a relative link and the following is the expected behavior:

A relative value (that does not begin with /) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that .

Unfortunately this doesn't mean that an empty string will just link to the URL you are already on. If you had a route like this:

<Route path="/questions/:id" element={<MyElement />} />

and a URL like:

https://stackoverflow.com/questions/57586239/is-empty-string-valid-value-for-react-link

the 'match' part is just https://stackoverflow.com/questions/57586239, and this is what the Link with empty to will link you to. In fact you will see it as the href of the <a> element.

Even if your matched route exactly equals the current URL, so it seems like empty string trick might work, each Link click will create an entry in the navigation history which will mess up navigating backwards and forwards if the intention is for the link to be a no-op.

This last point means that even using a trick like <Link to={window.location.href}> won't work because it will still pollute the navigation history.

There are plenty of good alternative suggestions as answers to this question that will work, but I wanted to try to answer why empty string as to is a bad idea.

Answer 4

Use <BUTTON> instead, you will have same pseudo like :active, :focus as link and it will get rid of warnings.

generally install: eslint; sonarlint extenstion... they will give you recommendation and industry standards for small errros like this.

Answer 5

Use "javascript.void(0)" instead of using an empty string.

import {Link} from 'react-router';

mycontent

Kindly refer to docs What does "javascript:void(0)" mean?