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

问题描述

我正在尝试从登录页面隐藏导航栏，但我找不到解决方法。我是新来的反应者，有人可以帮助我吗？在此先感谢：）

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;

1. 这是我的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')
);

解决方法

Ciao，您可以通过以下方式使用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'。

,

尝试使用React Router的useLocation。然后，您可以根据位置有条件地进行渲染。

import React from "react";
import { Route,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,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);