React router multiple <Switch>

Question

I'm using "react-router-dom": "^4.3.1",, "@material-ui/core": "^3.9.2",

I got router.ts which has Route, Switch and MainPage component.

router.ts

      <HashRouter>
        <div id="App">
          <Appbar />
          <Switch>
            <Route exact path="/" component={MainPage} />
            <Route exact path="/signup" component={SignupPage} />
            <Route exact path="/signup/success" component={SignupSuccessPage} />
            <Route exact path="/room/:id" component={NovelPage} />
            <Route component={NotfoundPage} />
          </Switch>
        </div>
      </HashRouter>

And I got MainPage component which has Route and Switch

          <AppBar position="static">
            <Tabs
              variant="fullWidth"
              value={this.state.value}
              indicatorColor="primary"
              textColor="primary"
            >
                  <Tab
                    label={"latest_novel"}
                    onChange={this.handleTabsChange(`/latest/novel`, 0)}
                  />
                  <Tab
                    label={"create novel"}
                    onChange={this.handleTabsChange(`/create/room`, 1)}
                  />
            </Tabs>
            <Switch>
              <Route exact path={`${this.props.match.url}/latest/novel`} component={TodayNovelPage} />
              <Route exact path={`${this.props.match.url}/create/room`} component={CreateRoomPage} />
            </Switch>
          </AppBar>

I expected

1. When I click Mainpage's Tab component then, page url is changed like "localhost:3000/latest/novel" and page is moved.

2. When page is moved then it shows under MainPage's Switch

But, when I tried it.

Page is moved but, Tabs is disappears and it seemed shows under the router.ts not Mainpage. Why is it?

Please let me know if you need more info.

Thanks.

Answer 1

You should have common parent route for both the tabs. Please check below example which I have created.

https://codesandbox.io/s/zz2xnn9p7m

Index.js

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

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

import MainPage from "../src/mainPage";

import "./styles.css";

function App() {
return (
  <div className="App">
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" color="inherit">
          Relay Novel
        </Typography>
      </Toolbar>
    </AppBar>
    <BrowserRouter>
     <Switch>
        <Route exact path="/" render={() => <Redirect to="/mainPage" />} />
        <Route path="/mainPage" component={MainPage} />
     </Switch>
    </BrowserRouter>
  </div>
  );
 }
 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);

MainPage.js

import React, { Fragment } from "react";
  import ReactDOM from "react-dom";
  import { Switch, Route, Redirect, Link } from "react-router-dom";

  import Tabs from "@material-ui/core/Tabs";
  import Tab from "@material-ui/core/Tab";

  class MainPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: 0
      };
    }

    handleChange = (event, value) => {
      this.setState({ value });
    };
    render() {
      const { value } = this.state;
      return (
        <Fragment>
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Latest Novel" component={Link} to="/mainPage/tab1" />
            <Tab label="Create Novel" component={Link} to="/mainPage/tab2" />
          </Tabs>
          <Switch>
            <Route exact path="/mainPage" />
            <Route path="/mainPage/tab2" render={() => <div>Latest Novel</div>} />
            <Route path="/mainPage/tab1" render={() => <div>Create Novel</div>} />
          </Switch>
        </Fragment>
      );
    }
  }
  export default MainPage;