如何在单击路由器链接时隐藏组件答案

【问题标题】：how to hide components on click of router link如何在单击路由器链接时隐藏组件
【发布时间】：2019-11-28 15:54:02
【问题描述】：

我在那个App.js 中有我的app.js 我想在单击该路由器时显示一些组件。这是我的App.js 代码

import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';
import Header from './Header'
import Slider from './Slider';
import Section from './Section';
import Footer from './Footer';
import Register from './Register';
class IndecisionApp extends React.Component {
    render() {

        return (
            <BrowserRouter>
                <div className="wrapper"> 

                    <Header/>
                    <Route path="/register" component={Register}></Route>
                    <Slider />
                    <Section /> 
                    <Footer />
                </div>
            </BrowserRouter>
        );
    }
}

export default IndecisionApp;\

我想在单击路由器时隐藏Section 和Slider 组件。

【问题讨论】：

标签： javascript reactjs react-router react-component

【解决方案1】：

你在做 react-router 错误。

正确的做法是这样的

  <BrowserRouter>
      <div className="wrapper"> 
          <Header/>
         <Switch>
          <Route path="/register" component={Register}></Route>

        </Switch>
          <Slider />
          <Section /> 
          <Footer />
      </div>
   </BrowserRouter>

更多关于反应路由器 https://reacttraining.com/react-router/web/guides/quick-start

【讨论】：

它工作正常，但当我从中删除 topics 时不显示滑块也不显示部分
当您访问 url localhost:3000/topics 时，只会显示滑块组件
我不希望它变成这样。我希望除注册之外的所有内容都应显示在索引上，当我单击 register 时，应显示完整的注册页面

【解决方案2】：

假设您有一个 home 组件，并且仅显示为包含 section 和 slide 的着陆页。

所以基本上应该有两条路线，一条是 landing 另一条是 register，如下所示

<Route path="/register" component={Register} />
<Route exact path="/" component={Home} />

但是由于您的主页/登陆/索引页面应该显示部分并一起滑动，所以我稍微更改了主页路线，最后总结为以下代码

      <BrowserRouter>
        <div className="wrapper">
          <Header />
          <div>
            <Link to="/">Home</Link>
            <Link to="/register">Register</Link>
          </div>
          <Switch>
            <Route path={"/register"} component={Register} />
            <Route
              exact
              path="/"
              render={() => (
                <React.Fragment>
                  <Home />
                  <Slider />
                  <Section />
                </React.Fragment>
              )}
            />
          </Switch>
          <Footer />
        </div>
      </BrowserRouter>

如果你的想法不同，请告诉我

【讨论】：

我已经解决了这个问题，现在我还有一个问题
告诉我你的第二个问题