CODEWITHSUNDEEP
javascriptreactjsreact-router
Surya Putra
Surya Putra

Reputation: 3

The <Link> from react-router-dom does not change the URL

I am currently in process of making a website, and hit a wall on this. I am using react-router-dom for routing my app, and kinda new to it, but in one page, the link that I put on the page does not change the URL

I already tried on previous component, in which I put the button on one component, then use the Link to load another component based on the Link and Route given. However, on this one, despite using similar structure as before, does not work at all

This is the code for the page that loads. I already imported the BrowserRouter as Link from react-router-dom

<div>
  <p>TEST</p>
   <Link to="/leadslist"><button class="btn btn-success">Back to Leads List</button></Link>
</div>

This is the target page

            <div>
            <Router>
                <Switch>
                    <Redirect from="/leads" to="/leadslist" />
                    <Route path="/leadsForm" component={LeadsForm} />
                    <Route path="/leadslist" component={LeadsList} />
                    <Route path="/leaddetails" component={LeadsDetails}/>
                 </Switch>
            </Router>
            </div>

my previous try clicking button from "/leadslist" to "/leadsForm" actually worked, but then I try to load to "leaddetails" to try to go back to "/leadslist", but it doesn't change the URL at all. Any help will be truly appreciated.

Upvotes: 0

Views: 5143

Answers (2)

Sangam Rajpara
Sangam Rajpara

Reputation: 678

Your code doesn't work because you have added button inside Link tag so on click of button React only fires onClick method of button and Link will no be clicked!

So in solution, you can remove a button from Link tag 

<Link to="/leadslist">Back to Leads List</Link>

or You can use Below solution,

Instead of adding button in Link You should do this,

import withRouter from 'react-router-dom'   
const Component = (props) => {
    <div>
        <Button onClick={()=>props.history.push('/leadslist')}
    </div>
  }
export default withRouter(Component)

Add HOC withRouter to your component and you can get history object in prop.

Upvotes: 3

Saqib
Saqib

Reputation: 735

You should not be importing BrowserRoute as Link from the react-router-dom. Both are different things. You need to import Link directly from react-router-dom. Rest, it should work solid.

You should be importing link this way:

import { Link } from "react-router-dom";

Now, I am not sure what's exactly happening your app. But here, I have created a very basic demo or working react-router using CodeSandBox. You can take a look, it should help you fix the problem you are having.

Also, you can read this article to further understand the working of the react router.

Upvotes: 4

Related Questions