Question

强文本，我有一个在jsx文件中创建的轮播组件。当我转到其他页面并导航回该页面时，轮播不会重新呈现。我尝试过更新路线，并调查所有可能的css原因。我看到轮播容器在那里，但没有内容显示。

以下是我的jsx文件：

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
import { Button, Icon } from 'react-materialize'
import ReactDOM from 'react-dom'
import './Carousel.css';

class Carousel extends Component {

    render() {
        return (
            <Fragment>
                <div>
                    <div class="row">
                        <div class="col s12">
                            {/*  <!--Images and carousel items below --> */}
                            <div width="100%" id="carousel-div" class="carousel userInput">
                                <div class="left">
                                    <a href="Previo" class="movePrevCarousel middle-indicator-text waves-effect waves-light">
                                        <i class="material-icons left  middle-indicator-text">chevron_left</i>
                                    </a>
                                </div>
                                <a class="carousel-item submitBTN" id="letters" data-search='Sports' href="#letters">
                                    <img height="190" width="400" src="https://toddlermasterclass.com/wp-content/uploads/2015/07/Fun-Games-For-Preschoolers.png"
                                        alt="" />
                                </a>
                                <a class="carousel-item submitBTN" id="numbers" data-search='Music' href="#numbers">
                                    <img height="190" width="400" src="http://imgsdown.1mobile.com/group1/M00/A5/58/S36rZlagE-mAOxmfAAQhEBsG6mg860.png" alt="" />
                                </a>
                                <a class="carousel-item submitBTN" id="colors" data-search='Technology' href="#colors">
                                    <img height="190" width="400" src="https://i.ytimg.com/vi/e1dHmEJcMG0/maxresdefault.jpg" alt="" />
                                </a>
                                <a class="carousel-item submitBTN" id="memory-match" data-search='Food' href="#memory-match">
                                    <img height="190" width="400" src="https://images-na.ssl-images-amazon.com/images/I/713UI4Vy1-L.png" alt="" />
                                </a>
                                <a class="carousel-item submitBTN" id="shapes" data-search='Arts' href="#shapes!">
                                    <img height="190" width="400" src="https://i.ytimg.com/vi/AQbnbrTHgtA/maxresdefault.jpg" alt="" />
                                </a>
                                <a class="submitBTN btn waves-effect waves-light" type="submit" name="action">Submit
                                    <i class="material-icons right">send</i>
                                </a>
                                <div class="right">
                                    <a href="Siguiente" class="moveNextCarousel middle-indicator-text waves-effect waves-light">
                                        <i class="material-icons right middle-indicator-text">chevron_right</i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                ); 
        </Fragment>
        )
    }
}

export default Carousel;

以下是我的路由器文件：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Parents from './components/Parents';
import Login from './components/Login';
import Home from './components/Home';
import About from './components/About'
import Cards from './components/cardGame';
import Carousel from './components/Carousel';
/* import ReactCarousel from './components/ReactCarousel'; */
import ColorGame from './components/colorGame/colorGame';
import NumberGame from './components/NumberGame/numberGame';


const AppRouter = () => {
// class AppRouter extends Component {
//     render() {
        return (
            <Router>
                <div>
                    {/* edit username */}
                    <Navbar username='User' message='welcome back!'/>

                    <Route path='/Login' component={Login} />
                    <Route path='/Home' component={Home} />
                    <Route path='/About' component={About} />
                    <Route path='/Parents' component={Parents} />
                    <Route path='/colorGame' component={ColorGame} />
                    <Route path='/cardGame' component={Cards} />
                    <Route path='/numberGame' component={NumberGame} />
                </div>
            </Router>
        )
    }
// }

export default AppRouter;

以下是我要在其中显示轮播的Home.js文件：

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Button, Icon } from 'react-materialize'
import './Home.css';
import ReactDOM from 'react-dom';
import Carousel from '../Carousel';
/* import ReactCarousel from '../ReactCarousel'; */

class Home extends Component {
    render() {
        return (

        <Fragment>
                <Carousel />
                {/* <ReactCarousel /> */}
            </Fragment>
        )
    }
}

export default Home;

这是导航栏组件

import React, { Fragment } from 'react';
import { Link } from 'react-router-dom'
import './Navbar.css'



const Navbar = props => {
  return (

     <Fragment>
      <nav className="navigation_container">

      <div className="l-triangle-top"></div>
   <div className="l-triangle-bottom"></div>

   <div className="rectangle">
        <div className="navigation">
          <Link className='nav-item nav-link' to='/Parents'>Parents Place</Link>
          <ul className="right hide-on-med-and-down">
            <li><Link className='nav-item nav-link' to='/Home'>Home</Link></li>
            <li><Link className='nav-item nav-link' to='/Login'>Logout</Link></li>
            <li><Link className='nav-item nav-link' to='/About'>About</Link></li>
          </ul>
        </div>
         </div>
         <div className="r-triangle-top"></div>
         <div className="r-triangle-bottom"></div>
      </nav>
    </Fragment>
  )
} 


export default Navbar;

有人可以帮我看看为什么导航回到主页时无法显示旋转木马吗？

Answer 1

您可以显示您的<Navbar />组件吗？由于您的起始路径为path='/Home'，请确保您的<Link to='/**H**ome'/>中有NavBar

Answer 2

我遇到了同样的问题：轮播会一开始就很好渲染，但是从另一个页面（使用React Router）导航回到轮播后，轮播组件不会重新呈现。我找不到解决此问题的方法。

我最终使用了react-materialize library，虽然不是很理想，但是确实为我解决了这个问题。希望对您有所帮助，如果您确实找到了解决方案，请告诉我们！：-）

在URL更改时，React组件不会使用React Router重新呈现

2 个答案: