score:1

If you need Nested routing inside ComponentB you should add Links for those Routes as well. And use match.url and match.path to build the nested Links and Routes.

const ComponentB = ({ match }) => {
    return (
        <div> 
            <div>
                <ul>
                    <li><Link to={`${match.url}/c`}>Component C</Link></li>

                    // more Links
                    <li><Link to={`${match.url}/css`}>CSS</Link></li>
                    <li><Link to={`${match.url}/react`}>React</Link></li>
                </ul>
            </div>
            <div>
                <Route path={`${match.path}/c`} component={ComponentC} />

                // more nested Routes
                <Route path={`${match.path}/css`} render={() => { return <h1>CSS</h1> }}/>
                <Route path={`${match.path}/react`} render={() => { return <h1>React</h1> }}/>
            </div>
        </div>
    );
}

Nested routing

Components created via Route will automatically be passed the following prop objects: match, location and history.

Using match you can implement nested Routes. The match object contains the following properties:

  • params — (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
  • isExact — (boolean) true if the entire URL was matched (no trailing characters)
  • path — (string) The path pattern used to match. Useful for building nested Routes
  • url — (string) The matched portion of the URL. Useful for building nested Links

Reference

  1. https://medium.freecodecamp.org/beginners-guide-to-react-router-4-8959ceb3ad58
  2. https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

score:2

You can do it in following way:

<Route exact path='/a' component={A} />
<Route path='/b' component={B} />

// Following should be router inside Component B
<Route exact path='/b/abc' component={OtherComponent}

If you want I've prepared few react-router 4 examples. These are hosted here. https://github.com/SandipNirmal/react-router-examples


Related Query

More Query from same tag