如何在 React 中正確使用路由器內部的路由器

Question

我正在努力使用“react-router-dom”創建路由。 正在顯示默認的“Page1”：如您在此處看到的，但是當切換到“Page2”或“Page3”時，我得到了一個空白頁面。

如果有人能夠查看我的代碼，我會很高興。 謝謝！

應用程序.js：

import Layout from "./Layout";
import Login from "./Login";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path={"/"} component={Layout} />
        <Route path={"/login"} component={Login} />
      </Switch>
    </Router>
  );
}

export default App;   

登錄.js：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    flexGrow: "1",
    height: "100%",
  },
}));

const Login = () => {
  const classes = useStyles();
  return <div className={classes.root}>Login</div>;
};

export default Login;

布局.js：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Header from "./Header";
import Menu from "./Menu";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import { Switch, Route } from "react-router-dom";

const useStyles = makeStyles(() => ({
  root: {
    display: "flex",
    overflow: "hidden",
    backgroundColor: "red",
  },
}));

export default function Layout() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Menu />
      <Grid container direction="column">
        <Grid item xs>
          <Header />
        </Grid>
        <Grid item xs>
          <Switch>
            <Route exact path="/" component={Page1} />
            <Route path="/page2" component={Page2} />
            <Route path="/page3" component={Page3} />
          </Switch>
        </Grid>
      </Grid>
    </div>
  );
}

菜單.js

import { useHistory } from "react-router-dom";
import React, { useState } from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
    width: "90px",
    backgroundColor: theme.palette.background.menu,
    textAlign: "center",
    justifyContent: "center",
    backgroundColor: "lightblue",
  },
}));

const StyledListItem = withStyles((theme) => ({
  root: {
    flexDirection: "column",
    textAlign: "center",
    opacity: 0.8,
  },
}))(ListItem);

const MainNavMenu = (props) => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const classes = useStyles(props);
  let history = useHistory();

  // Navigate between pages
  const navigate = (text, index) => {
    setSelectedIndex(index);
    if ("page1" === text) {
      history.push("/");
    } else if ("page2" === text) {
      history.push("/page2");
    } else {
      history.push("/page3");
    }
  };

  return (
    <div className={classes.root}>
      <List>
        {["page1", "page2", "page3"].map((text, index) => (
          <StyledListItem
            button
            key={index}
            selected={selectedIndex === index}
            onClick={() => {
              navigate(text, index);
            }}
          >
            <ListItemText primary={text} />
          </StyledListItem>
        ))}
      </List>
    </div>
  );
};

export default MainNavMenu;

Page1.js（所有頁面看起來都一樣）：

function Page1() {
  return (
    <div>
      <h1>Page 1</h1>
    </div>
  );
}

export default Page1;

Answer 1

您的代碼中沒有 page1 或 page2 路由。 這就是為什么你會得到一個空白頁。

Answer 2

您的應用需要知道它應該通過Layout組件處理/page2和/page1 。 現在它不是因為你的Route只匹配exact path={"/"} 。

您可以刪除exact的通過Layout發送所有流量。 由於使用了第一個匹配項，因此您總是希望從最具體到最不具體列出您的Route組件。 如果沒有exact ， Route for Layout現在屬於列表的底部。

function App() {
  return (
    <Router>
      <Switch>
        <Route path={"/login"} component={Login} />
        <Route path={"/"} component={Layout} />
      </Switch>
    </Router>
  );
}

---

Layout中的路徑與Menu中的路徑不匹配。 您在Layout中沒有/page3 。

布局：

<Route exact path="/" component={Page1} />
<Route path="/page1" component={Page2} />
<Route path="/page2" component={Page3} />

菜單：

{["page1", "page2", "page3"].map((text, index) => (

您可能想像這樣更改Layout ：

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

---

我個人會使用 react-router-dom Link組件進行導航，但您需要以不同的方式處理樣式。

Answer 3

在應用程序組件中刪除精確。由於您放置了精確，它不會切換到嵌套組件。

<Switch>
      <Route path={"/"} component={Layout} />
      <Route path={"/login"} component={Login} />
</Switch>

編輯評論

只需命名路線而不是空白，例如“/home”並將空白路線重定向到家。 像這樣

<Switch>
      <Route exact path="/" > <Redirect to="/home" /> </Route>
      <Route path={"/home"} component={Layout} />
      <Route path={"/login"} component={Login} />
</Switch>

大多數情況下 page1,page2,page3 都會起作用。 如果沒有，請實現“useRoutematch”並將路徑放在 Layout.js 中的<Route>中

Answer 4

 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Fragment, useEffect } from 'react';
  <Router>
    <Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route component={Routes} />
      </Switch>
    </Fragment>
  </Router>