如何在Reactjs中设置路由器链接

时间：2019-11-28 10:34:12

标签： javascript reactjs react-router

我是新手，我基本上有两个问题。我正在将模板嵌入ReactJs中。

  1. 我在滑块上遇到问题。我的滑块的文本显示在导航栏上，并且滑块也不起作用。它具有内联样式。
  2. 我的项目中有五个组成部分。我想对其中之一应用路由。

原始滑块

enter image description here

我的滑块

enter image description here

这是我的代码文件

  1. index.html文件

<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
</div><!-- #wrapper end -->



    <!-- Go To Top
============================================= -->
<!-- <div id="gotoTop" class="icon-angle-up"></div> -->

<script src="/scripts/app.js"></script>

<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>

<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script>

  1. Header.js

    从'react'导入React； 从“ ./images/chatfit_logo.png”导入徽标 类标题扩展了React.Component {     render（）{

        return (

    <header id="header" className="transparent-header full-header" data-sticky-class="not-dark">

<div id="header-wrap">

<div className="container clearfix">

    <div id="primary-menu-trigger"><i className="icon-reorder"></i></div>

    <div id="logo">
        <a href="index.html" className="standard-logo" data-dark-logo="images/logo-dark.png"><img src={logo} alt="Chatfit logo" /></a>
        <a href="index.html" className="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo" /></a>
    </div>

    <nav id="primary-menu" className="dark">

        <ul>
            <li className="current"><a href="index.html"><div>Home</div></a>
            </li>
            <li><a href="#"><div>Our Mission</div></a>
            </li>
            <li className="mega-menu"><a href="#"><div>Services</div></a>
            </li>
            <li className="mega-menu"><a href="#"><div>App Overview</div></a>
            </li>
            <li className="mega-menu"><a href="#"><div>Team</div></a>
            </li>
            <li><a href="shop.html"><div>Contact Us</div></a>
            </li>
        </ul>

        <div id="top-cart">
            <a href="#" id="top-cart-trigger"><i className="icon-shopping-cart"></i><span>5</span></a>
            <div className="top-cart-content">
                <div className="top-cart-title">
                    <h4>Shopping Cart</h4>
                </div>
                <div className="top-cart-items">
                    <div className="top-cart-item clearfix">
                        <div className="top-cart-item-image">
                            <a href="#"><img src="images/shop/small/1.jpg" alt="Blue Round-Neck Tshirt" /></a>
                        </div>
                        <div className="top-cart-item-desc">
                            <a href="#">Blue Round-Neck Tshirt</a>
                            <span className="top-cart-item-price">$19.99</span>
                            <span className="top-cart-item-quantity">x 2</span>
                        </div>
                    </div>
                    <div className="top-cart-item clearfix">
                        <div className="top-cart-item-image">
                            <a href="#"><img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" /></a>
                        </div>
                        <div className="top-cart-item-desc">
                            <a href="#">Light Blue Denim Dress</a>
                            <span className="top-cart-item-price">$24.99</span>
                            <span className="top-cart-item-quantity">x 3</span>
                        </div>
                    </div>
                </div>
                <div className="top-cart-action clearfix">
                    <span className="fleft top-checkout-price">$114.95</span>
                    <button className="button button-3d button-small nomargin fright">View Cart</button>
                </div>
            </div>
        </div>


        <div id="top-search">
            <a href="#" id="top-search-trigger"><i className="icon-search3"></i><i className="icon-line-cross"></i></a>
            <form action="search.html" method="get">
                <input type="text" name="q" className="form-control" value="" placeholder="Type &amp; Hit Enter.." readOnly/>
            </form>
        </div>

    </nav>

</div>

</div>
</header>

    );
}

    } 导出默认标题；

  2. Slider.js

    从“反应”导入React

    Slider类扩展了React.Component {     render（）{         返回（                         

                <div className="swiper-container swiper-parent">
                <div className="swiper-wrapper">
                    <div className="swiper-slide dark" style={{backgroundImage: "url(images/slider/swiper/1.jpg)"}}>
                        <div className="container clearfix">
                            <div className="slider-caption slider-caption-center">
                                <h2 data-caption-animate="fadeInUp">Welcome to Canvas</h2>
                                <p data-caption-animate="fadeInUp" data-caption-delay="200">Create just what you need for your Perfect Website. Choose from a wide range of Elements &amp; simply put them on your own Canvas.</p>
                            </div>
                        </div>
                    </div>
                    <div className="swiper-slide dark">
                        <div className="container clearfix">
                            <div className="slider-caption slider-caption-center">
                                <h2 data-caption-animate="fadeInUp">Beautifully Flexible</h2>
                                <p data-caption-animate="fadeInUp" data-caption-delay="200">Looks beautiful &amp; ultra-sharp on Retina Screen Displays. Powerful Layout with Responsive functionality that can be adapted to any screen size.</p>
                            </div>
                        </div>
                        <div className="video-wrap">
                            <video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoPlay muted>
                                <source src='images/videos/explore.webm' type='video/webm' />
                                <source src='images/videos/explore.mp4' type='video/mp4' />
                            </video>
                            <div className="video-overlay" style={{backgroundColor: 'rgba(0,0,0,0.55)'}}></div>
                        </div>
                    </div>
                    <div className="swiper-slide" style={{backgroundImage: 'url(images/slider/swiper/3.jpg)' , backgroundPosition: 'center top'}}>
                        <div className="container clearfix">
                            <div className="slider-caption">
                                <h2 data-caption-animate="fadeInUp">Great Performance</h2>
                                <p data-caption-animate="fadeInUp" data-caption-delay="200">You'll be surprised to see the Final Results of your Creation &amp; would crave for more.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="slider-arrow-left"><i className="icon-angle-left"></i></div>
                <div id="slider-arrow-right"><i className="icon-angle-right"></i></div>
            </div>

            <a href="#" data-scrollto="#content" data-offset="100" className="dark one-page-arrow"><i className="icon-angle-down infinite animated fadeInDown"></i></a>

        </div>
    </section>

    );
}

    }

    导出默认滑块；

  3. App.js

    从'react'导入React； 从'react-router-dom'导入{BrowserRouter}; 从“ ./Header”导入标题 从'./Slider'导入Slider; 从“ ./Section”导入Section； 从“ ./Footer”导入页脚 IndecisionApp类扩展了React.Component {     render（）{

        return (
        <BrowserRouter>
            <div className="wrapper"> 
                <Header/>
                <Slider />
                <Section />
                <Footer /> <!-- Register.js goes here but should show in another page
            </div>
        </BrowserRouter>
    );
}

    }

    导出默认的IndecisionApp;

Navigationbar和footer对于Register.js是相同的。我想要，当我单击“注册”链接时。它应该重定向到Register.js并显示页眉和页脚我该怎么办。

编辑

现在我的App.js中有这样的内容

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

当我单击链接时，我想隐藏Slider和Section

谢谢

2 个答案:

答案 0 :(得分：0)

您可以在此处导入Link。

    <ul>
        <li className="current"><Link to="/register"><div>Register</div></Link>
        </li>
        </li>
    </ul>

如您所知，在这里导入Route 

  For Example

 <BrowserRouter>
        <div className="wrapper"> 
            <Header/>
            <Slider />
            <Section />
            <Route path="/register" component="Your_register_component"></Route>
            <Footer /> <!-- Register.js goes here but should show in another page
        </div>
    </BrowserRouter>

答案 1 :(得分：0)

试试这个@QasimAli

<BrowserRouter>
  <div className="wrapper"> 
      <Header/>
      <Route  exact path="/register" component={Register}></Route>
      <Slider />
      <Section /> 
      <Footer />
   </div>
</BrowserRouter>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

相关问题
最新问题