IT技术 - React，对除主页外的每个页面使用导航栏布局 - 吾爱随笔录

对于已经使用 react 的人来说，这可能是一个非常愚蠢的问题。但是，我最近开始探索 React 功能，但似乎找不到将布局扩展到几个组件的方法。我尝试了其他帖子中已经提到的一些东西，比如使用 props.location 但我没有成功。目前我的布局正在扩展到所有页面，但我想为主页制作一个不同的导航栏。我还尝试根据路径名使用 IF'S 和 ELSES 以某种方式执行此操作，但未成功。有人对如何进行有任何提示吗？我真的不知道该怎么想。我的文件目前组织如下：

App = () => ( 
<Provider store={store}>
    <Router>
      <Layout>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/about' component={About} />
          <Route exact path='/contact' component={Contact} />
          <Route exact path='/listings' component={Listings} />
          <PrivateRoute exact path='/listings/:id' component={ListingDetail} />
          <Route exact path='/login' component={Login} />
          <Route exact path='/signup' component={SignUp} />
          <Route component={NotFound} />
        </Switch>  
      </Layout>
    </Router>
</Provider>
);

我的布局：

import React from 'react';
import Navbar from '../components/Navbar';




const layout = (props) => (
<div>
    <Navbar/>
   
    {props.children}
</div>
);

export default layout;

我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);


reportWebVitals();