reactjs - 带有 Material UI 的 React Router 不会渲染组件

Question

组件不渲染，我所看到的只是组件，仅此而已。

这是 App.js

import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./app/Header";
import HomePage from "./app/HomePage";
import Tasks from "./app/tasks/Tasks";
import { Counter } from "./features/counter/Counter";

export default function App() {
   return (
      <BrowserRouter>
         <Switch>
            <Header/>
            <Route exact path='/' component={HomePage} />
            <Route path='/counter' component={Counter} />
            <Route path='/tasks' component={Tasks}/> 
         </Switch>
      </BrowserRouter>
   );
}

这是 Header.js 中的 Material UI 列表，我有链接。

            {["Add Client", "Edit existing", "Tasks", "Next renewals"].map((text, index) => (
               <Link
                  style={{ textDecoration: "none", color: "inherit" }}
                  to={`/${text.toLowerCase().replace(" ", "-")}`}
               >
                  <ListItem button key={text}>
                     <ListItemIcon>
                        {index % 2 === 0 ? <PostAddIcon/> : <EditIcon/>}
                     </ListItemIcon>
                     <ListItemText primary={text} />
                  </ListItem>
               </Link>
            ))}
         </List>

标签： reactjsmaterial-ui

Answer 1

将 Header 组件放在 Switch 外面，这样在整个应用程序中都是一样的：

function App() {
  return (
    <BrowserRouter>
      <Header/>
      <Switch>
        <Route exact path='/' component={HomePage} />
        <Route path='/counter' component={Counter} />
        <Route path='/tasks' component={Tasks}/> 
      </Switch>
    </BrowserRouter>
  )
}