blocks|key|6101|text|您可以将其添加到所有路由(通过声明非精确路径)，并将其隐藏在您的特定路径中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6102|<Route+path='/'+component={Header}+/>+//+note,+no+exact={true}|code-block|syntax|javascript|6103|然后在Header+render方法中：|offset|length|style|CODE|6104|render()+{
++const+{match:+{url}}+=+this.props;

++if(url.startWith('/your-no-header-path')+{
++++return+null;
++}+else+{
++++//+your+existing+render+login
++}
}|6105|entityMap^0|0|0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You could add it to all routes (by declaring a non exact path) and hide it in your specific path:

<pre><code>&lt;Route path='/' component={Header} /&gt; // note, no exact={true}
</code></pre>

then in <code>Header</code> render method:

<pre><code>render() {
 const {match: {url}} = this.props;

 if(url.startWith('/your-no-header-path') {
 return null;
 } else {
 // your existing render login
 }
}
</code></pre>

blocks|key|2653958|text|您可以依靠状态来进行重新呈现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2653959|如果从shouldHide路线导航，然后从this.setState({+hide:+true+})路线导航|offset|length|style|CODE|2653960|您可以在渲染中使用以下条件包装<Header>：|2653961|{
++!this.state.hide+&&
++<Header>
}|code-block|syntax|javascript|2653962|或者，您可以使用一个函数：|2653963|_header+=+()+=>+{
++const+{+hide+}+=+this.state
++if+(hide)+return+null
++return+(
++++<Header+/>
++)
}|2653964|在render方法中：|2653965|{this._header()}|2653966|我还没有尝试使用react-router，但是像这样的东西可能会起作用：|2653967|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>
++++);
++}
}|2653968|并且您需要手动调用Art内部的函数：|2653969|this.props.hideHeader()|2653970|entityMap^0|0|3|A|L|T|0|F|8|0|0|0|0|0|0|0|0|0|0|N|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]|$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1H|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1L|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1M|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|15|$]]

You can rely on state to do the re-rendering.

If you navigate from route <code>shouldHide</code> then <code>this.setState({ hide: true })</code>

You can wrap your <code>&lt;Header&gt;</code> in the render with a conditional:

<pre><code>{
 !this.state.hide &amp;&amp;
 &lt;Header&gt;
}
</code></pre>

Or you can use a function:

<pre><code>_header = () =&gt; {
 const { hide } = this.state
 if (hide) return null
 return (
 &lt;Header /&gt;
 )
}
</code></pre>

And in the render method:

<pre><code>{this._header()}
</code></pre>

I haven't tried react-router, but something like this might work:

<pre><code>class App extends Component {

 constructor(props) {
 super(props)
 this.state = {
 hide: false
 }
 }

 toggleHeader = () =&gt; {
 const { hide } = this.state
 this.setState({ hide: !hide })
 }

 render() {

 const Main = () =&gt; (
 &lt;Switch&gt;
 &lt;Route exact activeClassName="active" path="/" component={Home} /&gt;
 &lt;Route
 exact
 activeClassName="active"
 path="/art"
 render={(props) =&gt; &lt;Art toggleHeader={this.toggleHeader} /&gt;}
 /&gt;
 &lt;Route exact activeClassName="active" path="/about" component={About} /&gt;
 &lt;Route exact activeClassName="active" path="/contact" component={Contact} /&gt;
 &lt;/Switch&gt;
 );

 return (
 &lt;BrowserRouter&gt;
 &lt;div className="App"&gt;
 &lt;Frame&gt;
 &lt;Canvas /&gt;
 &lt;Header /&gt;
 &lt;Main /&gt;
 &lt;NavBar /&gt;
 &lt;/Frame&gt;
 &lt;/div&gt;
 &lt;/BrowserRouter&gt;
 );
 }
}
</code></pre>

And you need to manually call the function inside Art:

<code>this.props.hideHeader()</code>

blocks|key|6656|text|从React+Router+5.1开始，就有了钩子useLocation，它可以让您轻松访问当前位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6657|import+{+useLocation+}+from+'react-router-dom'

function+HeaderView()+{
++let+location+=+useLocation();
++console.log(location.pathname);
++return+Path+:+{location.pathname}
}|code-block|syntax|javascript|6658|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Since React Router 5.1 there is the hook useLocation, which lets you easily access the current location.

<pre><code>import { useLocation } from 'react-router-dom'

function HeaderView() {
 let location = useLocation();
 console.log(location.pathname);
 return &lt;span&gt;Path : {location.pathname}&lt;/span&gt;
}
</code></pre>

blocks|key|2653993|text|{location.pathname+!==+'/page-you-dont-want'+&&+<YourComponent+/>}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2653994|这将检查路径名称，如果它不是您不希望组件出现的页面，它将不显示它，否则将显示它。|unstyled|2653995|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>{location.pathname !== '/page-you-dont-want' &amp;&amp; &lt;YourComponent /&gt;}
</code></pre>
This will check the path name if it is NOT page that you DO NOT want the component to appear, it will NOT display it, otherwise is WILL display it.

New to React: 

I have a <code>&lt;Header /&gt;</code> Component that I want to hide only when the user visit a specific page. 

The way I designed my app so far is that the <code>&lt;Header /&gt;</code> Component is not re-rendered when navigating, only the page content is, so it gives a really smooth experience.

I tried to re-render the header for every route, that would make it easy to hide, but I get that ugly re-rendering glitch each time I navigate.

So basically, is there a way to re-render a component only when going in and out of a specific route ?

If not, what would be the best practice to achieve this goal ?

App.js:

<pre><code>class App extends Component {

 render() {
 return (
 &lt;BrowserRouter&gt;
 &lt;div className="App"&gt;
 &lt;Frame&gt;
 &lt;Canvas /&gt;
 &lt;Header /&gt;
 &lt;Main /&gt;
 &lt;NavBar /&gt;
 &lt;/Frame&gt;
 &lt;/div&gt;
 &lt;/BrowserRouter&gt;
 );
 }
}
</code></pre>

Main.js:

<pre><code>const Main = () =&gt; (
 &lt;Switch&gt;
 &lt;Route exact activeClassName="active" path="/" component={Home} /&gt;
 &lt;Route exact activeClassName="active" path="/art" component={Art} /&gt;
 &lt;Route exact activeClassName="active" path="/about" component={About} /&gt;
 &lt;Route exact activeClassName="active" path="/contact" component={Contact} /&gt;
 &lt;/Switch&gt;
);
</code></pre>

React: Hide a Component on a specific Route

路由

React新特性：我有一个<Header />组件，我希望仅当用户访问特定页面时才对其进行隐藏。到目前为止，我设计我的应用程序的方式是，当导航时，<Header />组件是而不是重新呈现，只有页面内容是，所以它提供了一个非常流畅的体验。我试图重新渲染每条路线的头部，这将使它很容易隐藏，但每次我导航时都会遇到丑陋的重新渲...

问React:隐藏特定路由上的组件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:隐藏特定路由上的组件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:隐藏特定路由上的组件
EN