如何使用react路由器从登录页面隐藏导航栏

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

Ciao，您可以通过以下方式使用'react-router-dom'提供的withRouter：

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

并在this.props.location.pathname === '/signin'的情况下隐藏NavBar。

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的withRouterHOC来访问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/>} />
</Switch>
</div>
)
}
};