如何使用React Router从登录页面隐藏导航栏？

Question

我正在尝试从登录页面隐藏导航栏，但我找不到方法。我是新来的，有人可以帮助我吗？预先感谢:)

1. 这是我的 App.js 组件

    import React from "react";
    import { Route, Switch } from 'react-router-dom';

    
    class App extends React.Component {
          render() {
    
            return (
                <div>
                   
                    <NavBar />
                    <Switch>
                        <Route exact={true} path='/' component={HomePage} />
                        <Route path='/men' component={MensPage} />
                        <Route path='/woman' component={WomansPage} />
                        <Route path='/signin' component={SignInAndSignUpPage} />
                    </Switch>
                </div>
            )
    
        }
        };
    
        export default App;

2. 这是我的index.js 文件

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import App from './app';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Answer 1

再见，你可以这样使用

withRouter

提供的

'react-router-dom'

：

import React from "react";
import { Route, Switch, withRouter } from 'react-router-dom';


class App extends React.Component {
      render() {

        return (
            <div>
               
                {this.props.location.pathname !== '/signin' && <NavBar />}
                <Switch>
                    <Route exact={true} path='/' component={HomePage} />
                    <Route path='/men' component={MensPage} />
                    <Route path='/woman' component={WomansPage} />
                    <Route path='/signin' component={SignInAndSignUpPage} />
                </Switch>
            </div>
        )

    }
    };

    export default withRouter(App);

并隐藏

NavBar

以防万一

this.props.location.pathname === '/signin'

。

Answer 2

尝试 React Router 的

useLocation

。然后，您可以根据位置有条件地渲染。

import React from "react";
import { Route, Switch, useLocation } from 'react-router-dom';

const App = () => {
  const { pathname } = useLocation();
  return (
    <div> 
     { pathname !== 'signin' && <NavBar /> }

注意，要使用 Hook，您需要将类组件转换为函数组件。如果您不想执行此步骤，您可以使用 React Router 的

withRouter

HOC 来访问

location

:

import React from "react";
import { Route, Switch, withRouter } from 'react-router-dom';

class App extends React.Component {
  render() {
    const { location: { pathname } } = this.props;
    return (
      <div> 
       { pathname !== 'signin' && <NavBar /> }
         // ...
  }

export default withRouter(App);

Answer 3

在react-router-dom v6中你可以使用outlet，我更改你的代码以与v6一起使用，如下所示：

import React from "react";
import { Route, Switch, Outlet } from 'react-router-dom';


class App extends React.Component {
  render() {

    return (
        <div>
            <Switch>
                <Route path="/signin"  element={<SignInAndSignUpPage />} />
                <Route
                element={
                    <>
                    <NavBar />
                    <Outlet />
                    </>
                }
                >
                <Route path="/"    exact element={<Dashboard />} />
                <Route path='/men'       element={<MensPage/>} />
                <Route path='/woman'     element={<WomansPage/>} />
            </Route>
            </Switch>
        </div>
    )

  }
};