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> ) } }

see sharper · Accepted Answer · 2022-08-19 01:32:03Z

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.

chrisA · Accepted Answer · 2018-07-21 05:15:14Z

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.

frankenapps · Accepted Answer · 2021-08-04 06:11:58Z

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>

Tomasz Mularczyk · Accepted Answer · 2018-02-03 17:47:59Z

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.

ehsan parsania · Accepted Answer · 2021-05-31 13:01:17Z

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

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

abhishek · Accepted Answer · 2022-09-04 13:28:42Z

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....

`

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

React Router Link is not working

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

{name}

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

{name}

1 Comment

Linked

Related