问反应路由器多<Switch>
EN

Stack Overflow用户

提问于 2019-05-09 00:45:58

回答 1查看 4.5K关注 0票数 2

我用的是"react-router-dom": "^4.3.1",，"@material-ui/core": "^3.9.2",

我得到了router.ts，它有路由、交换机和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组件，它有路由和交换机

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

我本以为

然后，当我单击主页的Tab组件时，页面url会更改为“localhost:3000/最新/新颖”，页面会被移动。
当页面被移动时，它会显示在主页的开关下面

但是当我尝试的时候。

页面被移动，但是Tabs消失了，它似乎显示在router.ts而不是主页下面。为什么会这样呢？

如果你需要更多的信息，请告诉我。

谢谢。

react-router

material-ui

react-router-dom

回答 1

Stack Overflow用户

发布于 2019-05-09 22:03:40

对于这两个选项卡，您应该有共同的父路由。请检查下面的例子，我已经创建了。

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;