React router: Link changes url but doesn't load component

Question

this has been driving me crazy. I have an app using react-router. When I load from the server everything works correctly. But when I try to hit a route through the Link component, it just changes the url and the component doesn't get loaded. Someone please help me how to solve this problem .

         class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Consider using the solution from here - https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view — Anurag Srivastava, Mar 02 '19 at 16:45
because Link is outside of Router component. Router is not aware of that link, do it like this: `
Products....all routes here
` — Mayank Shukla, Mar 02 '19 at 16:45
@MayankShukla Tried with inside Router component but Not working — John, Mar 02 '19 at 16:46
@MayankShukla. I am using nested Routing structure might look like `dashboard/products` .. I added exact to every route . could you please suggest any new method ? — John, Mar 02 '19 at 16:54
follow this react-router details, very well explained, i hope it will answer all your questions. [link](https://reacttraining.com/react-router/web/guides/quick-start) — Mayank Shukla, Mar 02 '19 at 16:56

score 1 · Accepted Answer · answered Mar 02 '19 at 16:52

1

when I use react-router, link outside of route, there'll be warning it's forbidden. So at this time, I will use tag a or history.

answered Mar 02 '19 at 16:52

Nana Sun

91
3

React router: Link changes url but doesn't load component

1 Answers1