Question

我正在使用"react-router-dom": "^4.3.1",，"@material-ui/core": "^3.9.2",

我得到了具有路由，交换机和MainPage组件的router.ts。

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和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>

我希望

然后，当我单击Mainpage的Tab组件时，页面url会像“ localhost：3000 / latest / novel”一样更改，并且页面也会移动。
移动页面后，它将显示在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;

反应路由器多个<switch>

1 个答案: