Я довольно новичок, чтобы реагировать, и сейчас я пытаюсь использовать React Router и Material UI вместе.
У меня есть файл макета, в котором используется панель навигации из пользовательского интерфейса материала, и я разместил свое меню слева и содержимое справа, как показано на пи c ниже
Что я хочу сделать, это когда я нажимаю на Test Comp, он должен загрузить компонент TestComp.js справа и так далее для Test Comp One для загрузки TestCompOne.js.
Я прошел через код ReactRouter со ссылками, коммутатором и маршрутом, но я не совсем уверен, где их разместить.
Я попытался добавить следующий код для моего файла макета, который должен иметь Маршрутизатор, но я уверен, что я не сделал это правильно Ошибка, которую я получаю,
Error: Invariant failed: You should not use <Link> outside a <Router>
Не могли бы вы исправить меня, чтобы получить это право, пожалуйста
index. js
import Layout from './Layout/Layout'
ReactDOM.render(
<React.StrictMode>
<Layout/>
</React.StrictMode>,
document.getElementById('root')
);
компонент - TestComp. js
import React from "react"
export default class TestComp extends React.Component {
render() {
return (
<h1>test component for test</h1>
);
}
}
Component TestCompOne. js
import React from "react"
export default class TestCompOne extends React.Component {
render() {
return (
<h1>test component ONE for test</h1>
);
}
}
Я вставляю весь файл Layout, который немного большой, но основной областью является drawer, которое является левым меню, а содержимое для отображения - то, где я добавил <Router>. Приносим извинения, если это совершенно неправильный способ, пожалуйста, предложите
Компонент Компоновка. js - в котором есть блок навигации из пользовательского интерфейса материала и где я хочу добавить Маршрутизатор для открытия отдельных компонентов
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;