Javascript 如何在ReactJS中跳过某些路由的页眉和页脚？

我有下面的代码，它为所有页面呈现一个带有页眉和页脚的应用程序

app.js

import React from 'react';
import {
  Route,
  Switch
} from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import Layout from './components/Layout'
import Home from './homeComponent';
import Login from './loginComponent';
import Dashboard from './dashboardComponent';

const App = ({ history }) => {
  return (
    <Layout>
        <ConnectedRouter history={history}>
            <Switch>
              <Route exact={true} path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/dashboard" component={Dashboard} />
              ... more routes
              <Route component={NoMatch} />
            </Switch>
        </ConnectedRouter>
    </Layout>
  );
};

export default App;

import Header from './headerComponent'
import Footer from './footerComponent'
import React, {Component} from 'react'

class Layout extends Component {
    render() {
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        )
    }
}

从“React”导入React；
进口{
路线,，
转换
}从“反应路由器dom”；
从“已连接路由器”导入{ConnectedRouter}
从“./components/Layout”导入布局
从“/homeComponent”导入主目录；
从“./loginComponent”导入登录名；
从“/dashboardComponent”导入仪表板；
常量应用=（{history}）=>{
返回(
…更多路线
);
};
导出默认应用程序；

layout.js

import React from 'react';
import {
  Route,
  Switch
} from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import Layout from './components/Layout'
import Home from './homeComponent';
import Login from './loginComponent';
import Dashboard from './dashboardComponent';

const App = ({ history }) => {
  return (
    <Layout>
        <ConnectedRouter history={history}>
            <Switch>
              <Route exact={true} path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/dashboard" component={Dashboard} />
              ... more routes
              <Route component={NoMatch} />
            </Switch>
        </ConnectedRouter>
    </Layout>
  );
};

export default App;

import Header from './headerComponent'
import Footer from './footerComponent'
import React, {Component} from 'react'

class Layout extends Component {
    render() {
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        )
    }
}

从“./headerComponent”导入标题
从“./footerComponent”导入页脚
从“React”导入React，{Component}
类布局扩展组件{
render（）{
返回(
{this.props.children}
)
}
}

---

对于某些页面（如主页和登录路径），跳过页眉和页脚渲染的最佳方法是什么？

我只需创建几个不同的布局，一个有页眉和页脚，另一个没有页眉和页脚。而不是将所有内容都包装到一个布局中。我只需要在每个页面组件中进行包装。因此，您的组件如下所示：

仪表板组件

<SimpleLayout>
  <Dashboard>
</SimpleLayout>

export const PublicLayout = (props) => <div>
<PublicHeader/>
  <Switch>
    <Route exact path="/" component={HomePage}/>
    <Route exact path='/signin' component={SigninForm} />
    <Route exact path='/signup' component={Signup} />         
  </Switch>
<PublicFooter/>

export const ProtectedLayout = (props) => <div>
<ProtectedHeader/>
 <Switch>
   <PrivateRoute exact path='/app/dashboard' component={Dashboard} />
   <Route component={NotFound} />
 </Switch>
<ProtectedFooter/>

主组件

<MainLayout>
  <Home>
</MainLayout>

---

我建议创建两个具有各自页眉和页脚以及专用路线的布局：

公共布局

<SimpleLayout>
  <Dashboard>
</SimpleLayout>

export const PublicLayout = (props) => <div>
<PublicHeader/>
  <Switch>
    <Route exact path="/" component={HomePage}/>
    <Route exact path='/signin' component={SigninForm} />
    <Route exact path='/signup' component={Signup} />         
  </Switch>
<PublicFooter/>

export const ProtectedLayout = (props) => <div>
<ProtectedHeader/>
 <Switch>
   <PrivateRoute exact path='/app/dashboard' component={Dashboard} />
   <Route component={NotFound} />
 </Switch>
<ProtectedFooter/>

export const PublicLayout=（道具）=>

受保护布局

<SimpleLayout>
  <Dashboard>
</SimpleLayout>

export const PublicLayout = (props) => <div>
<PublicHeader/>
  <Switch>
    <Route exact path="/" component={HomePage}/>
    <Route exact path='/signin' component={SigninForm} />
    <Route exact path='/signup' component={Signup} />         
  </Switch>
<PublicFooter/>

export const ProtectedLayout = (props) => <div>
<ProtectedHeader/>
 <Switch>
   <PrivateRoute exact path='/app/dashboard' component={Dashboard} />
   <Route component={NotFound} />
 </Switch>
<ProtectedFooter/>

export const ProtectedLayout=（道具）=>

在app.js中定义高级路由：

export default () => {
  return <div>
    <Switch>
      <Route path='/app' component={ProtectedLayout} />
      <Route path='/' component={PublicLayout} />
    </Switch>
  </div>
}

export default ({component: Component, ...rest}) => (
  <Route {...rest} render={props => (
    window.globalState.isAuthenticated() ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: '/signin',
        state: {from: props.location}
      }} />
    )
  )} />
)

导出默认值（）=>{
返回
}

定义专用路由：

export default () => {
  return <div>
    <Switch>
      <Route path='/app' component={ProtectedLayout} />
      <Route path='/' component={PublicLayout} />
    </Switch>
  </div>
}

export default ({component: Component, ...rest}) => (
  <Route {...rest} render={props => (
    window.globalState.isAuthenticated() ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: '/signin',
        state: {from: props.location}
      }} />
    )
  )} />
)

导出默认值（{component:component，…rest}）=>(
(
window.globalState.isAuthenticated（）(
) : (
)
)} />
)

使用

渲染

<ConnectedRouter history={history}>
  <Switch>
    <Route path="/dashboard" render={props => <Layout><Dashboard {...props} /></Layout>} />
    <Route path="/login" component={Login} />
  </Switch>
</ConnectedRouter>

} />

是的，我知道有点晚了

Visual studio 2019

import React from 'react';
import { Container } from 'reactstrap';
import NavMenu from '../components/NavMenu';

export default props => (
    <div>
        {window.location.pathname !== '/login' ? <NavMenu /> : null}        
        <Container>
            {props.children}
        </Container>
    </div>
);

从“React”导入React；
从“reactstrap”导入{Container}；
从“../components/NavMenu”导入NavMenu；
导出默认道具=>(
{window.location.pathname！='/login'？：null}
{props.children}
);

---

我希望有人能帮上忙！！！快乐编码

我在解决问题的同时提出了一些解决方案

首先，您可以将

开关

包装在网站页眉和页脚中

然后在页眉或页脚内部，使用

'react-router-dom'

中的

withRouter

包装组件，以便您可以访问routes道具

const-WebsiteHeader=props=>{
if（props.location.pathname==“/register”）返回null；
返回(
);
};
使用路由器导出默认值（WebsiteHeader）；

像这样试试

<Route path="/" render={(props) => (props.location.pathname !== "/login") && 
    <Header />}>
</Route>

<Route path="/" render={(props) => (props.location.pathname !== "/login") && 
  <Menu />}> 
</Route>

<PrivateRoute path="/scope" component={Scope}  ></PrivateRoute>

<Route exact path="/login" component={Login} />

（props.location.pathname！==“/login”）&&
}>
（props.location.pathname！==“/login”）&&
}> 

---

在本例中，我检查URL，如果URL为“/Login”，我将删除菜单和标题组件

，以强制刷新路由内部的标题。 使用forceRefresh={true}

const Routing = () => {
    return(
        <BrowserRouter forceRefresh={true}>
        <Header/>
        <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/list/:id" component={ListingApi}/>
                <Route path="/details/:id" component={HotelDetails}/>
                <Route path="/booking/:hotel_name" component={PlaceBooking}/>
                <Route path="/viewBooking" component={ViewBooking}/>
                <Route exact path="/login" component={LoginComponent}/>
                <Route  path="/signup" component={RegisterComponent}/>
        </Switch>
        <Footer/>
        </BrowserRouter>
    )
}

const路由=（）=>{
返回(
)
}

用于强制刷新路由内的标题

const Routing = () => {
    return(
        <BrowserRouter forceRefresh={true}>
        <Header/>
        <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/list/:id" component={ListingApi}/>
                <Route path="/details/:id" component={HotelDetails}/>
                <Route path="/booking/:hotel_name" component={PlaceBooking}/>
                <Route path="/viewBooking" component={ViewBooking}/>
                <Route exact path="/login" component={LoginComponent}/>
                <Route  path="/signup" component={RegisterComponent}/>
        </Switch>
        <Footer/>
        </BrowserRouter>
    )
}

const路由=（）=>{
返回(
)
}

这似乎是一个更干净的解决方案。我来试试。你能帮我给出同样的类组件解决方案吗？虽然这段代码可以回答这个问题，提供关于如何和/或为什么解决问题的附加上下文将提高答案的长期价值。我认为

WebsiteHeader

无法接收

props.location

，因为它无法切换！