How to link to Routes inside the component rendered by another Route with React Router

Question

i'm trying to use react router in my reactjs app. And I encountered this problem:

This is what i'm trying to do:

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

import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/Topics';
import LinkTest from '../Pages/LinkTest';

class AppRouter extends Component {
  render() {
    return (
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
              <Route path="/home" component={LinkTest}/>
            </ul>

            <hr />

            <Route path="/home" component={Home}/>
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />

          </div>
      </Router>
    );
  }
}

export default AppRouter;

Ignore "about" and "topic" component, when I click on "Home" link, it should target 2 routes, one will render "LinkTest" and the other renders "Home".

This is what inside "LinkTest":

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

class LinkTest extends Component {
  render() {
      const {match}=this.props;
    return (
        <div>
            <Link to={`${match.url}/Test`}>Link To Test</Link>
        </div>
    );
  }
}

export default LinkTest;

And inside my "Home" component:

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

import Test from './Test';

class Home extends Component {
  render() {
      const {match} = this.props;
      console.log(match.url);
    return (
        <Router>
            <div>
                <h2>
                    Hello from Home page
                    <Link to={`${match.url}/Test`}>Link To Test</Link>
                    <Route path={`${match.url}/Test`} component={Test}/>
                </h2>

            </div>
        </Router>

    );
  }
}

export default Home;

However:

• When i click on the link inside "LinkTest" component (which was rendered earlier), the url on the browser is shown "http://localhost:3000/home/Test", but nothing happens.

• When i clicked on the link inside "Home" component, (which was rendered the same time as the "LinkTest" using the same link), it showed the same url on the browser: "http://localhost:3000/home/Test", only this time it rendered the "Test" component.

Why does this happen? (what i want to achieve is I want to use the link inside "LinkTest" to render "Test" component inside "Home" component, or something similar).

I hope this is clear enough.

Answer 1

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

Answer 2

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