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屋!