issue with react-router showing component when not in route

Question

I am using react-router and having some difficulties with it's behaviour.

The Nav shows on all pages as desired. However, the Profile shows on all pages too. I only want to show this on /home and also on the /music and /players pages, which it does. However, it also shows on the /charts page which is confusing me.

My code looks like the following.

import React from 'react';
import { Route } from 'react-router-dom'

import Nav from './components/Nav'
import Profile from './components/Profile'
import Players from './components/Players'
import Music from './components/Music'
import Charts from './components/Charts'

const App = () => {

  return (
    <section>

      <Nav />

      <Route path="/home">
        <div>
          <Profile avatarUrl={ avatarUrl }/>
          <Route path="/players" component={Players}/>
          <Route path="/music" component={Music}/>
        </div>
      </Route>

      <Route path="/charts" component={Charts}/>

    </section>
  )
}

export default App;

I have read through the docs, tried putting in a Switch component, added exact to the home route but this leads to other unexpected behaviour.

Can anyone advise what I am doing wrong?

Thanks Pete!

Hey Pete! Why have you placed players and music routes inside home? Do you wish to render Players and Music when the Home route is loaded? — Shishir
– Shishir, Commented Mar 10, 2018 at 12:40

Shishir · Accepted Answer · 2018-03-10 15:05:30Z

1

Try this:

import React from 'react';
import { Route, BrowserRouter as Router } from 'react-router-dom'

import Nav from './components/Nav'
import Profile from './components/Profile'
import Players from './components/Players'
import Music from './components/Music'
import Charts from './components/Charts'

const Home = ({match}) => {
    return (
    <div>
      <Profile avatarUrl={ avatarUrl }/>
      <Route path=`${match.url}/players` component={Players}/>
      <Route path=`${match.url}/music` component={Music}/>
    </div>
  );
};

const App = () => {

  return (
    <section>

      <Nav />
      <Router>
        <Switch>
          <Route path="/charts" exact={true} component={Charts}/>
          <Route path="/home" component={Home} />
        </Switch>
      </Router>

    </section>
  )
}

export default App;

I haven't tested this, but this should work.

Assuming that you're using react-router v4, I don't know if you can actually use your home route in the way you've used it.

In the code above, Switch basically renders the first match between the routes specified under it. The exact keyword will ensure that only /charts path will display the Charts component.

The Home component will render in any path that starts with /home. Now, for path /home/players, you'll see the Profile and the Players component, whereas for path /home/music, you'll see the other combination.

Hope this helps. :)

Edit: Added Router to the code.

Edit: Working code available here: https://codesandbox.io/s/8x9pql9m19
Change route on right hand side to:
/home
/home/players
/home/music
/charts

edited Mar 10, 2018 at 15:05

answered Mar 10, 2018 at 12:48

Shishir

2,54622 silver badges22 bronze badges

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

7 Comments

peter flanagan Over a year ago

TypeError: Cannot read property 'url' of undefined doesn't know what match is

Shishir Over a year ago

You're including App inside a Router somewhere, right?

peter flanagan Over a year ago

it still doesn't really make sense why my Profile route is showing in the Chartscomponent does it?

Shishir Over a year ago

Can you try adding the Router element? I've added it to the sample code.

Shishir Over a year ago

I'm not sure why Profile route is getting rendered, but react-router v4 does not support nested routes like you've used in your original code.

|

Collectives™ on Stack Overflow

issue with react-router showing component when not in route

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related