如果不在主页上，ReactJS 仅显示标题

Question

所以我试图隐藏 <Header/>仅在主页上。但我需要它显示在其他页面上 - 例如当用户登录时。
我认为有可能必须Routes两者都有家，但做了不同的事情。
我认为可以这样做:

  <Router>  
        <Switch>  
          <Route exact path="/">  
            <Redirect to="/layout1" />  
          </Route>  
          <LoginLayoutRoute path="/layout1" component={LoginPage} />  
          <DashboardRoute path="/layout2" component={UserPage} />  
        </Switch>


  </Router>  

然而，我想要做的就是不显示是否在 / 上

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import './App.css';

/* PAGES */
import Header from './core/Header'; 
import Home from './core/pages/Home'; 
//import DashboardWrapper from './core/wrappers/DashboardWrapper';
/* END PAGES */


const theme = createMuiTheme({
  palette: {
    primary1Color: "#fff",
    primary2Color: "#c62828",
    accent1Color: "#ffffff",
    pickerHeaderColor: "#fce4ec",
  },
});

function App() {
  return (
    <Router>
        <ThemeProvider theme={theme}>
        <Header/>
        <Switch>
          <Route exact path="/" component={Home}/>
        </Switch>
        </ThemeProvider>
    </Router>
  );
}

export default App;

Answer 1

 function App() {
  return (
    <Router>
        <ThemeProvider theme={theme}>
        <Header/>
        <Switch>
          <Route exact path='/' component={Home}/>
        </Switch>
        </ThemeProvider>
    </Router>
  );
}

您在此处包含了 ThemeProvider 下的标题直接而不是在 Switch因此它显示在所有路径上!
将 Header 组件移动到您希望它渲染到的 Route 组件下!

<Route exact to='/path'>
 <Header/>
 <YourComponent />
<Route />