Компонент React не выполняет повторную визуализацию с помощью реагирующего маршрутизатора при изменении URL-адреса. - PullRequest
Новая
       51

Компонент React не выполняет повторную визуализацию с помощью реагирующего маршрутизатора при изменении URL-адреса.

0 голосов
/ 27 июня 2018

сильный текст У меня есть компонент карусели, который я создал в файле 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;

Вот компонент Navbar 

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;

Кто-нибудь поможет мне понять, почему карусель не рендерится, когда я вернусь на свою домашнюю страницу?

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

У меня была та же проблема: сначала карусель выглядела бы очень хорошо, но после перехода обратно к карусели с другой страницы (с помощью React Router) компонент карусели не перерисовывался. Я не смог найти решение этой проблемы.

Я закончил тем, что использовал библиотеку реагировать-материализовать , но это не идеально, но это помогло мне решить эту проблему. Надеюсь, это поможет, и если вы нашли решение, пожалуйста, сообщите нам! : -)

0 голосов
/ 27 июня 2018

Можете ли вы показать свой <Navbar /> компонент? Так как ваш домашний путь path='/Home', убедитесь, что у вас есть <Link to='/**H**ome'/> в вашем NavBar

...