React，对除主页外的每个页面使用导航栏布局 [英] React, Use navbar layout for every page with the exception of homepage

问题描述

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

App = () =>(<提供者商店={商店}><路由器><布局><开关><路由精确路径='/' component={Home}/><路由精确路径='/about' component={About}/><路由精确路径='/contact' component={Contact}/><路由精确路径='/listings' component={Listings}/><PrivateRoute 精确路径='/listings/:id' component={ListingDetail}/><路由精确路径='/login' component={Login}/><路由精确路径='/signup' component={SignUp}/><路由组件={NotFound}/></开关></布局></路由器></提供者>);

我的布局:

从'react'导入React；从'../components/Navbar'导入导航栏；const layout = (props) =>(<div><导航栏/>{props.children}

);导出默认布局；

我的 index.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App'导入应用程序；从'./reportWebVitals'导入reportWebVitals；ReactDOM.render(<React.StrictMode><应用程序/></React.StrictMode>,document.getElementById('root'));reportWebVitals();

解决方案

您可以为此使用嵌套的 Switch 标签，其中第一级仅决定是否需要导航栏，而第二级决定要渲染的子路由.例如:

const WithNavbar = () =><布局><开关><路由精确路径='/about' component={About}/><路由精确路径='/contact' component={Contact}/><路由精确路径='/listings' component={Listings}/><PrivateRoute 精确路径='/listings/:id' component={ListingDetail}/><路由精确路径='/login' component={Login}/><路由精确路径='/signup' component={SignUp}/><路由组件={NotFound}/></开关></布局>;应用程序 = () =>(<提供者商店={商店}><路由器><开关><路由精确路径='/' component={Home}/><路由组件={WithNavbar}/></开关></路由器></提供者>);

This will probably be a very stupid question for anyone already working with react. However, I started exploring react features recently and I can't seem to find a way to extend my layout to just a few components. I tried some things already mentioned in other posts like using props.location but I was unsuccessful. Currently my layout is being extended to all pages but I would like to make a different navbar for the home page. I also tried to do this in some ways with IF'S and ELSES depending on the pathnames but I was unsuccessful. Would anyone have any tips on how to proceed? I really don't know which way to think. My files are currently organized as follows:

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>
);

My layout:

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




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

export default layout;

My 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();

解决方案

You can use nested Switch tags for this, where the first level only decides whether you want the nav bar or not, and the second level decides the sub-route to render. For example:

const WithNavbar = () => <Layout>
  <Switch>
    <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>;

App = () => (
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route component={WithNavbar} />
      </Switch>
    </Router>
  </Provider>
);

这篇关于React，对除主页外的每个页面使用导航栏布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！