React Router 更改了 URL 地址，但它呈现了另一个组件 - Material ui V.5.0

Question

我对 React 18.0 中的路由感到头疼，我使用的是 react-router-dom v.5.0 和 Material ui - 5.0。 组件 Login 不呈现， 而是呈现另一个组件“CreateNotes”。 URL 显示 /login，组件“CreateNotes”被渲染。所有的路线都是正确的。此外，当我单击另一个 menuItem（“Banks”）时，它会转到正确的路线 "/bancos"，但它仍然呈现相同的组件 "[=16] =]"，路线 "/bancos" 在 URL 上。似乎卡在了这条路线上。我将只包括很长的代码的必要部分。谢谢你的帮助。总结：单击注销（呈现登录页面）呈现“CreateNote”并且 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

看起来您的组件使用不是预期的。您是要使用 Route 吗？

Link prop component 是自定义 Link 本身，而不是渲染整个页面。您的 Switch 组件应该仅呈现路由。

截至目前，它呈现路由 + 您的 Link 组件，该组件实际上呈现整个 CreateNotes 页面。

React Router 更改了 URL 地址，但它呈现了另一个组件 - Material ui V.5.0

React Router changes the URL address but it renders another component - Material ui V. 5.0

reactjs

react-router

material-ui

react-router-dom