Link don't works

[joneldiablo]

Hi, I'm using Link component to navigate but not working, the uri change, the path change but the view do nothing, I'm using react 17+

import React from 'react';
import { Link } from '@reach/router';

export default class TestBusinessView extends React.Component {
  
  onClick = (e) => {
    e.preventDefault();
    navigate(e.target.href);
  }
  
  render() {
    const { uri } = this.props;
    return <div>
      <div><Link to={`${uri}/parent-enterprise`} onClick={this.onClick}>Parent enterprise</Link></div>
    </div>;
  }
}

[fabryscript]

May you please console.log() the e.target.href value?

[joneldiablo]

sorry the code is wrong this not working:

import React from 'react';
import { Link } from '@reach/router';

export default class TestBusinessView extends React.Component {
  render() {
    const { uri } = this.props;
    return <div>
      <div><Link to={`${uri}/parent-enterprise`} >Parent enterprise</Link></div>
    </div>;
  }
}

and this is what I do to fix them:

import React from 'react';
import { navigate } from '@reach/router';

export default class TestBusinessView extends React.Component {
  
  onClick = (e) => {
    e.preventDefault();
    navigate(e.target.href);
  }
  
  render() {
    const { uri } = this.props;
    return <div>
      <div><a href={`${uri}/parent-enterprise`} onClick={this.onClick}>Parent enterprise</a></div>
    </div>;
  }
}

[fabryscript]

I'm glad you solved!

[joneldiablo]

It means that you going to add this code to your Link component? =D

[fabryscript]

I'm not a collaborator! But i wanted to help :)

[mbcod3]

In your second code which is working for you why are you even using navigate from reach router? Its a direct link with a tag with href. You dont need onclick on a tag with href. You are intercepting the link with onclick, preventing default behaviour and using navigate executing the default behaviour.

In the first example link should work. Are you using gatsby or react? In gatsby if you link to non existent page it will show 404 page. But you said it does nothing so I assume you are using react. You should check if you have a component for path ${uri}/parent-enterprise inside Router component