React Router Link is not working

Question

React router Link doesn't seem to work for my app. It seems I am missing like basic doesn't work. My Link component updates the URL to be /products/singleproduct but my page just breaks.... Could anyone please tell me how to solve this issue?

App.js

import React from 'react';
import Header from './Header';
import Body from './Body';
import Main from './Main';
require('../../scss/style.scss');

const App = () => (
    <div>
     <Header />
     <Main />
    </div>
);

export default App;

Main.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import ServicePage from './ServicePage';
import ProductPage from './ProductPage';
import SingleProductPage from './SingleProductPage';
import Body from './Body';

export default class Main extends Component {
  render() {
    return (
      <main>
        <Switch>
          <Route exact path="/" component={Body} />
          <Route path='/services' component={ServicePage} />
          <Route path='/products' component={ProductPage}>
            <Route path="/products/singleproduct" component={SingleProductPage} />
          </Route>
        </Switch>
      </main>
    )
  }
}

ProductPage.js

import React, { Component } from 'react';
import { Link } from 'react-router';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
require('../../scss/style.scss');

export default class ProductPage extends Component {

  render() {
    return (
      <div className="product-page">
        <h1>Products</h1>
        <div className="section-header-line"></div>
        <Link to="/products/singleProduct">
          Single Product
        </Link>
      </div>
    )
  }
}

score 10 · Answer 1 · edited Aug 19 '22 at 01:32

I don't know your situation exactly but here's a few things...

One. If you're using [react-router-dom][1], you need to wrap your switch with a BrowserRouter by importing it like so:

import { BrowserRouter, Route, Link } from 'react-router-dom'

and then adding it around your switch like so:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Body} />
  </Switch>
</BrowserRouter>

Two. react-router & react-router-dom are 2 separate things. Make sure your imports are consistent. Change ProductPage.js ln.2 to:

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

(right now, it's import { Link } from 'react-router';)

Three. Play around with your nested routes. Order matters when it comes to routes. Without exact, it takes your URL and tries to match it with the first one on the list. If you have a more generic route like /products before /products/somethingspecific the router will route you when it hits the first one and never get to the more specific route Try something like this:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Body} />
    <Route path='/services' component={ServicePage} />
    <Route path='/products/singleproduct' component={SingleProductPage} />
    <Route exact path='/products' component={ProductPage} />
  </Switch>
</BrowserRouter>

Good luck~!

Note: Not quite sure what "my page just breaks" means. Are you seeing any errors in your browser or console? If you could share more specifics, I think the SO community can help ya even more.

I have the issue, and it's none of the things you mentioned – Bersan Oct 18 '22 at 16:24 — Bersan, Oct 18 '22 at 16:24

score 1 · Answer 2 · edited Aug 04 '21 at 06:11

1

I think you could try wrapping the Switch with a Router component:

<Router>
  <Switch>
    <Route exact path="/" component={Body} />
    <Route path='/services' component={ServicePage} />
    <Route path='/products' component={ProductPage} />
    <Route path="/products/singleproduct" component={SingleProductPage} />
  </Switch>
</Router>

edited Aug 04 '21 at 06:11

frankenapps

5,800
6
28
69

answered Feb 03 '18 at 18:03

Jan Cziżikow

613
2
10
20

score 1 · Answer 3 · answered Jul 21 '18 at 05:15

I had a situation where my Router Links were not working, and it ended up being the use of a <StyleRoot> within my App.js which caused the problem. After removing the <StyleRoot>...</StyleRoot> tags from App.js, I added them to a specific component which truly needed it. After this, my Router Links worked properly. Double check if any CSS Styling utilities such as <StyleRoot> (from Radium) are affecting your app.

score 0 · Answer 4 · answered Feb 03 '18 at 17:47

You are using react-redux so I bet this happens because connected components are not notified that props had changed and react doesn't re-render.

Take a look at this answer.

as well as

react-redux troubleshooting section.

So basically try to use { pure: false } on components where you use connect(... or use withRouter on them.

score 0 · Answer 5 · answered May 31 '21 at 13:01

0

you have to be sure all of your components are in includes Header or layout components

<BrowserRouter>
   <Switch>
     <Link to="/somewhere" />  
   </Switch>
</BrowserRouter>

answered May 31 '21 at 13:01

ehsan parsania

66
1
7

abhishek · Answer 6 · 2022-09-04T13:28:42.293

0

Use BrowserRouter import { BrowserRouter as Router, Link } from "react-router-dom"; <Router> <Link to={/rooms/${id}}> <div className='sidebarChat'> <Avatar src={https://avatars.dicebear.com/api/human/${seed}.svg`}/>

{name}

Last message....

`

edited Sep 04 '22 at 13:28

answered Sep 04 '22 at 13:27

abhishek

1
2

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32642254) – Deenadhayalan Manoharan Sep 08 '22 at 09:27

React Router Link is not working

6 Answers6

{name}