如何在React中正确使用路由器内部的路由器

Question

我很难使用"反应路由器dom"；。默认的"；Page1"；正在显示：正如你在这里看到的，但当切换到"；Page2"；或"；Page3"；。

如果有人能看一下我的代码，我会很高兴的。谢谢

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

您的应用程序需要知道它应该通过Layout组件处理/page2和/page1。现在没有，因为你的Route只匹配exact path={"/"}。

您可以删除exact以通过Layout发送所有流量。由于使用了第一个匹配，因此您总是希望将Route组件从最特定的组件到最不特定的组件列出。如果没有exact，Layout的Route现在属于列表的底部。

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 domLink组件进行导航，但您需要以不同的方式处理您的样式。

Answer 2

代码中没有page1或page2路由。这就是为什么你会得到一张空白页。

Answer 3

删除精确的应用程序内组件。既然你说的是精确的，它就不会切换到嵌套组件。

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

编辑到评论

只需命名路线而不是空白，例如"/家；并将空白路由重定向到主页。像这个

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

大多数情况下，第1页、第2页、第3页都可以。如果没有；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>