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;

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

• javascript
• reactjs
• redux
• react-router
• react-redux

6 Answers 6

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

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>

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.

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

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

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