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

Question

我在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组件。

Answer 1

您的反应路由器做错了。

正确的方法是这个

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

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

更多关于React Routerhttps://reacttraining.com/react-router/web/guides/quick-start

Answer 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>

[如果您的想法有所不同，请告诉我