Javascript 将路由器与物料界面进行交互
我对react非常陌生,现在我正尝试将react路由器和Material UI结合使用 我有我的布局文件,使用材料界面的导航抽屉,我把菜单放在左边,内容放在右边,如下图所示 我想做的是,当我点击Javascript 将路由器与物料界面进行交互,javascript,reactjs,react-router,material-ui,Javascript,Reactjs,React Router,Material Ui,我对react非常陌生,现在我正尝试将react路由器和Material UI结合使用 我有我的布局文件,使用材料界面的导航抽屉,我把菜单放在左边,内容放在右边,如下图所示 我想做的是,当我点击TestComp时,它应该加载右侧的TestComp.js组件,以此类推,以便TestCompOne加载TestCompOne.js 我已经通过路由器代码的链接,交换机和路由,但我不确切地知道在哪里放置它们 我尝试为我的布局文件添加以下代码,该文件应该有路由器,但我确信我没有正确完成 我得到的错误是 Er
TestComp
时,它应该加载右侧的TestComp.js
组件,以此类推,以便TestCompOne
加载TestCompOne.js
我已经通过路由器代码的链接,交换机和路由,但我不确切地知道在哪里放置它们
我尝试为我的布局文件添加以下代码,该文件应该有路由器,但我确信我没有正确完成
我得到的错误是
Error: Invariant failed: You should not use <Link> outside a <Router>
链接需要位于
环境中。
试一试
返回(
响应抽屉
{/*实现可以与js交换,以避免SEO重复链接。*/}
{抽屉}
{抽屉}
{sampleText}
当我从左菜单中按各个组件时,我想使用React Rounter来显示它们
);
您需要将链接放在路由器中,正如上面所说的,您可能希望将
作为顶级父项放在外部,那么单击菜单项如何?
import Layout from './Layout/Layout'
ReactDOM.render(
<React.StrictMode>
<Layout/>
</React.StrictMode>,
document.getElementById('root')
);
import React from "react"
export default class TestComp extends React.Component {
render() {
return (
<h1>test component for test</h1>
);
}
}
import React from "react"
export default class TestCompOne extends React.Component {
render() {
return (
<h1>test component ONE for test</h1>
);
}
}
import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Divider from '@material-ui/core/Divider';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import MailIcon from '@material-ui/icons/Mail';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { MenuItem, MenuList } from '@material-ui/core';
import TestComp from '../Components/TestComp'
import TestCompOne from '../Components/TestCompOne'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
drawer: {
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0,
},
},
appBar: {
[theme.breakpoints.up('sm')]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
display: 'none',
},
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
}));
function ResponsiveDrawer(props) {
const { container } = props;
const classes = useStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = React.useState(false);
const [sampleText, setSampleText] = React.useState("test");
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
const testCompClicked = () => {
setSampleText("Test Comp")
};
const testCompOneClicked = () => {
setSampleText("Test Comp One")
};
const drawer = (
<div>
<div className={classes.toolbar} />
<Divider />
<MenuList>
<MenuItem onClick={testCompClicked} component={Link} to="/testcomp">
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Test Comp" />
</MenuItem>
<MenuItem onClick={testCompOneClicked} component={Link} to="/testcompone">
<ListItemIcon>
<MailIcon />
</ListItemIcon>
<ListItemText primary="Test Comp One" />
</MenuItem>
</MenuList>
<Divider />
</div>
);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar} style={{ background: '#78a02e'}}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Responsive drawer
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer} aria-label="mailbox folders">
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Hidden smUp implementation="css">
<Drawer
container={container}
variant="temporary"
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
<h1>{sampleText}</h1>
<h3>I want to show individual components using React Rounter when I press them from the left menu</h3>
<Router>
<Switch>
<Route path="/testcomp">
<TestComp />
</Route>
<Route path="/testcompone">
<TestCompOne />
</Route>
<Route path="/">
<TestComp />
</Route>
</Switch>
</Router>
</main>
</div>
);
}
ResponsiveDrawer.propTypes = {
/**
* Injected by the documentation to work in an iframe.
* You won't need it on your project.
*/
container: PropTypes.any,
};
export default ResponsiveDrawer;
return (
<Router>
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar} style={{ background: '#78a02e'}}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Responsive drawer
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer} aria-label="mailbox folders">
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Hidden smUp implementation="css">
<Drawer
container={container}
variant="temporary"
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
<h1>{sampleText}</h1>
<h3>I want to show individual components using React Rounter when I press them from the left menu</h3>
<Switch>
<Route path="/testcomp">
<TestComp />
</Route>
<Route path="/testcompone">
<TestCompOne />
</Route>
<Route path="/">
<TestComp />
</Route>
</Switch>
</main>
</div>
</Router>
);