在react-router-dom

时间:2019-07-10 13:35:23

标签: reactjs react-router react-router-dom react-dom

有没有一种方法可以隐藏React Router中仅某些路由的页面标题?现在的问题是我的App组件渲染了Main组件,其中包含我的BrowserRouter,而我的Header则渲染在了App组件中,所以我无法根据路由路径呈现标题。

以下是一些代码:

App.js

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Main from './Main';
import Header from './Header';
import Footer from './Footer';

const App = () => (
    <BrowserRouter>
        <Header/>
        <Main/>
        <Footer/>
    </BrowserRouter>
);

export default App;

Main.js

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from './Home';
import Login from './Login';

const Main = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path='/login' component={Login}/>
        </Switch>
    </main>
);

export default Main;

在此应用程序中,我想在登录页面上隐藏页眉和页脚。

3 个答案:

答案 0 :(得分:1)

您可以使用withRouter高阶组件访问App组件中的props.location对象,并使用props.location.pathname

检查用户是否在登录或注册页面上
import {BrowserRouter, withRouter} from 'react-router-dom'
const App = () => (
   <BrowserRouter>

     {
      props.location.pathname!=='/login' ? <Header/>:null
     }
        <Main/>
        <Footer/>

   </BrowserRouter>
);

export default withRouter(App);

答案 1 :(得分:1)

我最终使用Redux。这是最好的选择,因为我有二十多个页面(下面的代码中仅显示了3个页面),所有页面的页眉/页脚可见性都不同。我为页眉创建了一个reducer,为页脚创建了一个reducer。这是我的解决方案:

import ...

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                {this.props.header ? <Header/> : ''}
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/signup' component={Signup}/>
                </Switch>
                {this.props.footer ? <Footer/> : ''}
            </BrowserRouter>
        );
    }
}

const mapStateToProps = state => state;
export default connect(mapStateToProps)(App);

答案 2 :(得分:0)

您可以执行以下操作:

<Switch>
          {authRoutes.map(({ path, component: C }) => (
            <Route
              key={`${C}-route`}
              path={path}
              render={(props) => (
                <div className="app__activePage">
                  <C {...props} />
                </div>
              )}
            ></Route>
          ))}

          {routes.map(({ path, component: C }) => (
            <Route
              key={`${C}-route`}
              path={path}
              render={(props) => (
                <div className="app__activePage">
                  <Header />
                  <C {...props} />
                </div>
              )}
            ></Route>
          ))}
</Switch>

我通常将所有路由定义在另一个文件中,然后按组将其导出。这使我能够:

  1. 在一处定义所有路由
  2. 更清晰地处理不同的路由组