react-router-dom Link not working

Question

I moved from react-router to react-router-dom and fixed all the errors. But, now on clicking the links, url is changing but respective view is not rendering.

Here is structure of my application:

index.js

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <HashRouter>
        <App>
            <Switch>
                    <Route path="signin" component={Signin} />
                    <Route path="about" component={About} />
                    <Route path="signout" component={Signout} />
                    <Route path="signup" component={Signup} />
                    <Route path="thanks" component={Thanks} />
                    <Route path="tasks" component={ requireAuth(Task)  }/>
                    <Route path="/" component={ Content }/>

            </Switch>
        </App>
    </HashRouter>
  </Provider>
  , document.querySelector('.container'));

app.js

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                    {this.props.children}
                <Footer/>               
            </div>
        );
    }
}

export default withRouter(App);

header.js

class Header extends Component {

    showLoginButton() {
        if (this.props.authenticated) {
          // show a link to sign out
          return [<span className="loginBtn">
                    <Link to="/signout">Sign Out</Link>
                    </span>,
                <span className="loginBtn">
                    <Link to="/tasks">Tasks</Link>
                </span>
          ]
        } else {
          // show a link to sign in or sign up
          return [
            <span className="loginBtn" key={1}>
              <Link className="nav-link" to="/signin">Sign In</Link>
            </span>,
            <span className="loginBtn" key={2}>
              <Link className="nav-link" to="/signup">Sign Up</Link>
            </span>,
            <span className="loginBtn" key={3}>
                  <Link className="nav-link" to="/about">About</Link>
              </span>
          ];
        }
    }

    render() {
        return (
            <div className="header">
                <span className="logo">
                    <Link to="/" className="navbar-brand">company</Link>
                </span>
                {this.showLoginButton()}
            </div>
        );
    }
}

function mapStateToProps(state) {
  return {
    authenticated: state.auth.authenticated
  };
}

export default withRouter(connect(mapStateToProps)(Header));

I tried withRouter as mentioned in post https://stackoverflow.com/a/43811162/888181, but still it's not working!

sam · Accepted Answer · 2017-06-10 23:59:22Z

15

Try to move root path to the top and make sure you put exact in front of path. Also, you should put / for other paths.

<Switch>
    <Route exact path="/" component={ Content }/>
    <Route path="/signin" component={Signin} />
    <Route path="/about" component={About} />
    <Route path="/signout" component={Signout} />
    <Route path="/signup" component={Signup} />
    <Route path="/thanks" component={Thanks} />
    <Route path="/tasks" component={ requireAuth(Task)  }/>
</Switch>

reference: https://reacttraining.com/react-router/web/api/Switch

answered Jun 10, 2017 at 23:59

sam

2,8201 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oumaima Abou El Mawahib Over a year ago

Can you explain the need of "exact" ?

user15675581 · Accepted Answer · 2021-06-08 12:04:10Z

1

import {NavLink} from 'react-router-dom';

use NavLink component instread of a tag, for me it's working

edited Jun 8, 2021 at 12:04

answered Apr 17, 2021 at 20:31

user15675581

112 bronze badges

Comments

hadi-learn · Accepted Answer · 2023-02-20 10:36:25Z

1

I faced the same problem recently when using react-router-dom V6, all I did to resolve the issue was:

npm uninstall react-router-dom
npm install [email protected]
npm i --save @types/react-router-dom

Then I check my package.json but the dependencies turned out:

"@types/react-router-dom": "^5.3.3",
"react-router-dom": "^5.2.0"

So to the last step:

npm install [email protected]

That's it, my 'Link' worked just fine then.

answered Feb 20, 2023 at 10:36

hadi-learn

133 bronze badges

2 Comments

Lev Izraelit Over a year ago

The problem stated in this answer is not the same as the one in the question, so the answer is not relevant to it.

Inukollu Hari krishna Over a year ago

I faced the problem with v5 and followed the steps, it worked like a charm :), thanks @hadi-learn

ib95 · Accepted Answer · 2022-01-07 10:44:38Z

0

A bit late now but I recently had the same problem, which is why I came across your question, and found this article helpful: https://reactrouter.com/docs/en/v6/api#route

<Router>
    <Route exact path="/" element={ <Content /> }/>
</Router>

Now react-router-dom v6 has replaced the Switch elements with Routes too, so if you upgrade your package version be aware of that https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes

answered Jan 7, 2022 at 10:44

ib95

1283 silver badges10 bronze badges

Comments

pronita · Accepted Answer · 2022-06-04 15:02:38Z

0

I faced the same problem and doing this resolved the issue for me -

Install version 5.2.0 of react-router-dom : npm install [email protected]
delete package-lock.json and node_modules
install all the packages again : npm install

answered Jun 4, 2022 at 15:02

pronita

1

Collectives™ on Stack Overflow

react-router-dom Link not working

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related