在react-router-dom中隐藏某些页面的标题

Question

有没有办法可以隐藏 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;

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

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

Answer 2

我最终使用了 Redux。这是最好的选择，因为我有二十多个页面（下面的代码中仅显示了 3 个页面），所有这些页面的页眉/页脚的可见性各不相同。我为页眉创建了一个减速器，为页脚创建了一个减速器。这是我的解决方案：

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

Answer 3

在react-router-dom v6中有一个钩子useLocation可以在url发生变化时获取它 使用它 100% 有帮助并解决这个问题。

function App () {
let location = useLocation();
      return (
           <BrowserRouter>
                {location.pathname === '/login' && location.pathname==='/signup' && <Header/>}
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/signup' component={Signup}/>
                </Switch>
                {location.pathname === '/login' && location.pathname==='/signup' && <Footer/>}
            </BrowserRouter>
        );
    }
}

Answer 4

这对我有用：

我的类组件中的 props 一直未定义

{window.location.pathname !== "/app" ? (
          <NavBar />
) : null}

Answer 5

你可以这样做：

<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. 更干净地处理不同的路由组

Answer 6

尝试使用 useEffect 来监视路径名，但没有重新渲染页面，因此没有成功。然而， 通过在 App.tsx 中创建另一个组件，我能够不在主页中显示页脚，而是在其他页面中显示页脚。

import {Footer} from "./components/Footer";

export const ShowFooter = () => {
  const location = useLocation();
  if (location.pathname !== "/") return <Footer />;
  else return <></>;
};
function App() {
  return (
    <>
      <Router>
        <NavBar />
        <Routes>
          <Route path="/" element={<HomePage />} />
        </Routes>
        <ShowFooter />
      </Router>
    </>
  );
}

export default App;