React Router改变了URL地址，但是它渲染了另一个组件——Material ui V. 5.0

Question

我对react 18.0中的路由感到头痛，我使用的是react-router-domv.5.0和Material ui - 5.0。组件Login不渲染，将呈现另一个组件"CreateNotes">。URL显示/login，组件"CreateNotes"呈现。所有路线都是正确的。另外，当我点击另一个菜单项("银行")，它会转到正确的路径"/bancos"，但它仍然呈现相同的组件"CreateNotes">， URL上的路由为"/bancos"。看来它被困在这条路线上了。我将只包含代码中非常长的必要部分。谢谢你的帮助。总结:点击"登出"(渲染登录页面)渲染"创建";url显示/login。点击银行也是如此。为什么?

APP.JS

import Notes from './pages/Notes';
import CreateNotes from './pages/CreateNotes';
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Layout from './components/Layout';
import Login from './pages/Login';
import Bancos from './pages/Bancos';
import { createTheme, ThemeProvider } from '@mui/material/styles';
function App() {
return (
<ThemeProvider theme={theme}>
<Router>
<Layout>
<Switch>
<Route exact path="/" component={ Notes } />   
<Link to="/create" component={ CreateNotes } />
<Route exact path="/bancos" component={ Bancos } />
<Route exact path="/login" component={ Login } />      
</Switch>
</Layout>       
</Router>
</ThemeProvider>
);
}
export default App;

链接

<Link to="/login" style={{ textDecoration: "none", color: "white" }}>
<Button type="button" variant="text" 
sx={{ bgcolor: "#1483dd", color: "#ffffff", mt:1, marginRight: 11 }}>
{/* // onClick={() => { history.push('/login')}} didn't work */}
Logout
</Button>
</Link> 
// this link is at the app-bar menu

// The code below is in the Drawer:

const fileItems = [
{
text: 'Bancos',
icon: <AccountBalanceRoundedIcon style={{color: '#e2e7ea'}} />,
path: '/bancos',
},
{
text: 'Centro de Custos',
icon: <AttachMoneyIcon style={{color: '#e2e7ea'}} />,
path: '/custos',
},
{
text: 'Clientes',
icon: <PeopleAltIcon style={{color: '#e2e7ea'}} />,
path: '/clientes',
},
]
<List dense>
{fileItems.map((item) => (
<ListItem 
button 
dense
key={item.text} 
onClick={() => history.push(item.path)}
className={location.pathname == item.path ? classes.active : null}
>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText primary={item.text} className='listItem'/> 
</ListItem>
))}
</List>
// "/bancos" does not render

Answer 1

看起来您的组件使用不是有意的。你的意思是使用路由

?链接道具组件是自定义链接本身，而不是呈现整个页面。Switch组件应该只有渲染路线。

现在它渲染路由+你的链接组件，实际上是渲染整个CreateNotes页面。