Nested React Router v4

Question

I'm having an issue with my router. Can someone please help me. I have nested router in my pattern-library. When I click on the link, it goes to the homepage even though if I have set the correct path.

Thank You

Index.js

<Provider store={store} >
<Router>
  <App />
</Router>

App.js

<Switch>
          <Route exact path='/' component={HomePage}/>
          <Route exact path='/about-me' component={AboutMePage}/>
          <Route exact path='/pattern-library' component={PatternLibrary}/>
          <Redirect to="/" />

PatternLibrary.js

const PatternLibrary = ({ match }) => {return(
<div className='patternLibraryPage Page'>
  <ThemePanel />
  <div className='wrapper'>
    <Header />
    <Navigation />
    <switch>
      <Route path={match.path} exact component={DesignComponent} />
      <Route path={`${match.path}/design-component`} exact component={DesignComponent} />
    </switch>
  </div>
</div>);};

Navigation.js

class Navigation extends React.Component {constructor(props){
super(props);
this.state = {
  collapse : false,
  navTitle : 'Design Element'
};}                                             
onClickCollapseMenu(e){
e.preventDefault();
this.setState({ collapse: !this.state.collapse });} 
onClickSetTitle(title){
this.setState({
  navTitle : title
});}                                                            
render () {
return(
  <nav className='nav'>
    <div className='container'>
    <div className='navbar-header'>
      <button type='button' className='navbar-toggle collapsed' onClick={this.onClickCollapseMenu.bind(this)}>
        <span className='sr-only'>Toggle navigation</span> Menu <i className='fa fa-bars'></i>
      </button>
      <a className='navbar-brand page-scroll' href='#page-top'>{this.state.navTitle}</a>
    </div>

    <div className={classnames('collapse navbar-collapse', { 'in' : this.state.collapse})}>
      <ul className='navbar navbar-nav navbar-right'>
        <li><NavLink to='/pattern-library/design-component' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>Design Components</NavLink></li>
        <li><NavLink to='/pattern-library/ui-components' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>UI Components</NavLink></li>
        <li><NavLink to='/pattern-library/js-components' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>JS Components</NavLink></li>
        <li><NavLink to='/pattern-library/scss-components' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>SCSS Components</NavLink></li>
      </ul>
    </div>
    </div>
  </nav>
);}}

Answer 1

It's because you have your route set to match the path exactly:

<Route exact path='/pattern-library' component={PatternLibrary}/>

But you try to route to it with an additional path:

<NavLink to='/pattern-library/design-component' >Design Components</NavLink>

All you need to do is add a param placeholder to your route config:

<Route exact path='/pattern-library/:library' component={PatternLibrary}/>

Another issue I see is you need to capitalize the <Switch> in PatternLibrary.js

Edit:

Okay I forgot about the nested route. In that case you are right, you don't need the placeholder. By removing the exact param it should still match and then fall through to your switch in PatternLibrary. You're second route is correct:

<Route path="pattern-library/design-component" exact component={DesignComponent} />

You need to provide the full path, so that's why it's pattern-library/design-component and not just design-component.