javascript - 如何在Reactjs中设置路由器链接(How to setup Router link in Reactjs)

Question

I am newbie to react i basically have two questions.(我是新手，我基本上有两个问题。)

I am embedding a template into ReactJs .(我将模板嵌入到ReactJs 。)

1. I am having problem with slider.(我有滑块问题。) My slider's text is showing on navigation bar and slider is also not working.(我的滑块的文本显示在导航栏上，并且滑块也不起作用。) It has inline styling.(它具有内联样式。)
2. I have five components in my project.(我的项目有五个组成部分。) I would like to apply routing on one of them.(我想在其中之一上应用路由。)

Original Slider(原始滑块)

My Slider(我的滑块)

Here are my code files(这是我的代码文件)

1. index.html file(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(Header.js)

   import React from 'react';(从'react'导入React；)

   import logo from './images/chatfit_logo.png' class Header extends React.Component { render() {(从'./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/[email protected]"><img src="images/[email protected]" 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> ); } 

   } export default Header;(}导出默认标题；)

2. Slider.js(Slider.js)

   import React from 'react'(从'react'导入React)

   class Slider extends React.Component { render() { return((Slider类扩展了React.Component {render（）{return（)

     <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> ); } 

   }(})

   export default Slider;(导出默认的Slider;)

3. App.js(App.js)

   import React from 'react';(从'react'导入React；)

   import {BrowserRouter} from 'react-router-dom';(从'react-router-dom'导入{BrowserRouter};) import Header from './Header' import Slider from './Slider';(从'./Header'导入Header从'./Slider'导入Slider;) import Section from './Section';(从“ ./Section”导入Section；) import Footer from './Footer' class IndecisionApp extends React.Component { render() {(从“ ./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> ); } 

   }(})

   export default IndecisionApp;(导出默认的IndecisionApp;)

Navigationbar and footer are same for Register.js .(Navigationbar和footer与Register.js相同。)

I want, when I click on Register link.(我想要，当我单击“注册”链接时。) It should redirect to Register.js also displaying header and footer What should I do.(它应该重定向到Register.js并显示页眉和页脚我该怎么办。)

Edit(编辑)

Now in my App.js I have something like this(现在在我的App.js我有类似的内容)

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

When i click on the link I want to hide Slider and Section(当我单击链接时，我想隐藏“ Slider和“ Section)

Thanks(谢谢)

  ask by Qasim Ali translate from so

Answer 1

In here you can import the Link as you know.(您可以在此处导入Link如您所知）。)

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

Here import the Route as you know(如您所知，在这里导入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>