javascript - Nesting a BrowserRouter inside another BrowserRouter

Question

On the following Stackblitz:

https://stackblitz.com/edit/react-testing-routes-navigate-outside-kszb5l?file=src%2Fpages%2FPage2.jsx

I'm trying to include a:

BrowserRouter > Switch > Route > Component

inside another:

BrowserRouter > Switch > Route > Component.

Here is the code for: Page2.jsx:

import React from "react";
import { Link } from "react-router-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";

const Brush = ({color}) => {
  return (
    <div>
      <div>Brush: {color}</div>
      <div>
        <Link to="/p2x">/p2x</Link><br />
        <Link to="/p2y">/p2y</Link><br />
        <Link to="/p2z">/p2z</Link><br />
      </div>
    </div>
  );
};

class Page2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      letter: "B"
    };
  }

  render() {
    return (
      <>
        <div>You are currently on: Page 2 (Letter: {this.state.letter})</div>
        <Link to="/">Page 1</Link><br />
        <br />
        <Link to="/page2/p2x">/page2/p2x</Link><br />
        <Link to="/page2/p2y">/page2/p2y</Link><br />
        <Link to="/page2/p2z">/page2/p2z</Link><br />
        <br />
        <Link to="/page3">Page 3</Link><br />
        <BrowserRouter>
          <Switch>
            <Route path="/p2x" component={Brush} color="Red" />
            <Route path="/p2y" component={Brush} color="Green" />
            <Route path="/p2z" component={Brush} color="Blue" />
          </Switch>
        </BrowserRouter>
      </>
    );
  }
}

export default Page2;

I would expect the brush component to be rendered somewhere on the red line.

Then, I would also expect to have also some other links there that allow me to internally browse between links:

{ /p2x, /p2y, /p2z }

Instead, I get nothing there.

Any idea on how to do that?

My goal is: Create some kind of widget with few screens I can navigate from one to other. Then I was thinking on having a BrowserRouter in it. Later I could create a library with it that I could import into multiple projects. Do you think about any other way to do that?

Thanks!

question from:https://stackoverflow.com/questions/65858260/nesting-a-browserrouter-inside-another-browserrouter

Answer 1

In app.js file, you can define route in this way.

<Switch>
   <Route exact path="/" component={Page1 } />
   <Route path="/page2/p2x" component={Page2 } />
   <Route path="/page2/p2y" component={Page2 } />
   <Route path="/page2/p2z" component={Page2 } />
   <Route path="/page3" component={Page3 } />
</Switch>

Then, in Page2 component, you can render Brush component with parameter from route.