如何解决如何使用React Router从登录页面隐藏导航栏?
我正在尝试从登录页面隐藏导航栏,但我找不到解决方法。我是新来的反应者,有人可以帮助我吗?在此先感谢:)
- 这是我的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;
- 这是我的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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。