javascript - 如何在 React 中正确使用路由器内部的路由器
问题描述
我正在努力使用“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;
解决方案
您的应用程序需要知道它应该处理/page2
和/page1
通过Layout
组件。现在它不是因为你Route
唯一的匹配项exact path={"/"}
。
您可以删除exact
以通过 发送所有流量Layout
。由于使用了第一个匹配项,因此您总是希望将Route
组件从最具体到最不具体列出。没有exact
,Route
暂时Layout
属于列表的底部。
function App() {
return (
<Router>
<Switch>
<Route path={"/login"} component={Login} />
<Route path={"/"} component={Layout} />
</Switch>
</Router>
);
}
您的路径Layout
与Menu
. 你没有/page3
。Layout
布局:
<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
组件进行导航,但您需要以不同的方式处理样式。
推荐阅读
- node.js - > 为什么 cookie 没有从 node express 服务器传送到 react 应用程序
- typescript - Typescript 接口结合对象属性上的映射键
- android - 更新视图后 RecyclerView 中的 Kotlin RecyclerView 将转到子 RecyclerView
- c - 规范的 libpthread 分发
- entity-framework - 实体框架组总和处理空值
- python - Python3:处理条形分隔文件的最有效方法是什么?
- c# - 无法将类型隐式转换为类型参数 - C# 泛型
- python - 试图让 Python 控制 Firefox
- r - 如何记录单个数据框列中大字符串的拆分元素的存在/不存在
- python - 从 dataFrame 在 Scatter Matplotlib 中创建标签