React:隐藏特定路由上的组件
React:隐藏特定路由上的组件
提问于 2018-06-10 02:27:26
React新特性：
我有一个<Header />组件，我希望仅当用户访问特定页面时才对其进行隐藏。
到目前为止，我设计我的应用程序的方式是，当导航时，<Header />组件是而不是重新呈现，只有页面内容是，所以它提供了一个非常流畅的体验。
我试图重新渲染每条路线的头部，这将使它很容易隐藏，但每次我导航时都会遇到丑陋的重新渲染故障。
所以基本上，有没有一种方法只在进入和离开特定路由时才重新呈现组件?
如果没有，那么实现这一目标的最佳实践是什么？
App.js：
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Frame>
<Canvas />
<Header />
<Main />
<NavBar />
</Frame>
</div>
</BrowserRouter>
);
}
}Main.js：
const Main = () => (
<Switch>
<Route exact activeClassName="active" path="/" component={Home} />
<Route exact activeClassName="active" path="/art" component={Art} />
<Route exact activeClassName="active" path="/about" component={About} />
<Route exact activeClassName="active" path="/contact" component={Contact} />
</Switch>
);回答 4
Stack Overflow用户
发布于 2018-06-10 02:35:07
您可以将其添加到所有路由(通过声明非精确路径)，并将其隐藏在您的特定路径中：
<Route path='/' component={Header} /> // note, no exact={true}然后在Header render方法中：
render() {
const {match: {url}} = this.props;
if(url.startWith('/your-no-header-path') {
return null;
} else {
// your existing render login
}
}Stack Overflow用户
发布于 2020-05-01 02:42:02
从React Router 5.1开始，就有了钩子useLocation，它可以让您轻松访问当前位置。
import { useLocation } from 'react-router-dom'
function HeaderView() {
let location = useLocation();
console.log(location.pathname);
return <span>Path : {location.pathname}</span>
}Stack Overflow用户
发布于 2018-06-10 02:36:56
您可以依靠状态来进行重新呈现。
如果从shouldHide路线导航，然后从this.setState({ hide: true })路线导航
您可以在渲染中使用以下条件包装<Header>：
{
!this.state.hide &&
<Header>
}或者，您可以使用一个函数：
_header = () => {
const { hide } = this.state
if (hide) return null
return (
<Header />
)
}在render方法中：
{this._header()}我还没有尝试使用react-router，但是像这样的东西可能会起作用：
class App extends Component {
constructor(props) {
super(props)
this.state = {
hide: false
}
}
toggleHeader = () => {
const { hide } = this.state
this.setState({ hide: !hide })
}
render() {
const Main = () => (
<Switch>
<Route exact activeClassName="active" path="/" component={Home} />
<Route
exact
activeClassName="active"
path="/art"
render={(props) => <Art toggleHeader={this.toggleHeader} />}
/>
<Route exact activeClassName="active" path="/about" component={About} />
<Route exact activeClassName="active" path="/contact" component={Contact} />
</Switch>
);
return (
<BrowserRouter>
<div className="App">
<Frame>
<Canvas />
<Header />
<Main />
<NavBar />
</Frame>
</div>
</BrowserRouter>
);
}
}并且您需要手动调用Art内部的函数：
this.props.hideHeader()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50777333
复制相关文章
相似问题