React router множественный <Switch>

Question

Я использую "react-router-dom": "^4.3.1",, "@material-ui/core": "^3.9.2",

Я получил router.ts, в котором есть компонент Route, Switch и MainPage.

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>

И у меня есть MainPage компонент, который имеет 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>

Я ожидал

1. Когда я нажимаю на компонент вкладки главной страницы, тогда URL страницыизменилось как «localhost: 3000 / latest / novel» и страница перемещена.

2. Когда страница перемещается, она отображается под переключателем MainPage

Но, когда я попробовал.

Страница перемещена, но вкладки исчезают, и кажется, что под router.ts не отображается Mainpage.Почему это так?

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Спасибо.

Answer 1

У вас должен быть общий родительский маршрут для обеих вкладок. Пожалуйста, проверьте ниже пример, который я создал.

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;