React Router Link не меняет URL или компонент

Question

У меня есть приложение для поиска треков с двумя основными компонентами: Home и TrackList. Я использую React-Redux для управления состоянием. Tracklist отображается, когда поле поиска в Home отправлено и успешно выполнено. У меня есть кнопка home, которая обернута в тег Link внутри компонента TrackList, чтобы я мог вернуться на «домашнюю страницу».

Проблема, с которой я столкнулся, заключается в том, что при нажатии кнопки URL-адрес не изменяется и домашний компонент не отображается. Все, что он делает, это вызывает видимое обновление компонента TrackList при перезагрузке фрейма spotify. Однако, если я обновлю страницу по следующему адресу: localhost:3000/results, треки не будут перечислены (как и ожидалось), но кнопка теперь работает! Он возвращает меня к домашнему компоненту, и URL-адрес меняется на localhost:3000.

Я пробовал опцию withRouter(), а также вручную нажимал на историю, оба из которых не работали.

App.js

import React from 'react';
import { Provider } from 'react-redux';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import Home from './Home';
import TrackList from './TrackList';
import NotFound from './NotFound';

const App = ({ store }) => {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/results' component={TrackList} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </Provider>
  );
};

export default App;

Home.js

import React from 'react';
import Header from './Header';
import SearchField from './SearchField';
import ErrorContainer from './ErrorContainer';
import '../styles/Home.css';

const Home = () => {
  return (
    <div className='ui container' id='home-container'>
      <ErrorContainer />
      <Header />
      <SearchField />
    </div>
  );
};

export default Home;

TrackList.js

import React from 'react';
import { connect } from 'react-redux';
import { Link, Redirect } from 'react-router-dom';
import '../styles/TrackList.css';

const TrackList = props => {
  const data = props.tracks;
  const list = data.map(item => {
    return (
      <div
        key={item.track.id}
        className='ui one column centered grid track-item'>
        <div className='row'>
          <h3>{data.indexOf(item) + 1}</h3>
        </div>
        <div className='row'>
          <p>Artist: {item.track.artists[0].name}</p>
        </div>
        <div className='row'>
          <p>Track: {item.track.name}</p>
        </div>
        <div className='row'>
          <iframe
            title={item.track.name}
            src={`https://embed.spotify.com/?uri=${
              item.track.uri
            }&theme=white&view=coverart`}
            width='300'
            height='80'
            frameBorder='0'
            allowtransparency='true'
          />
        </div>
      </div>
    );
  });
  return props.error ? (
    <Redirect to='/' />
  ) : (
    <div className='ui container track-list-container'>
      <Link to='/'>
        <button>Home</button>
      </Link>
      <h1 className='centered-header'>{`${
        props.country
      } Top 10 on Spotify`}</h1>
      {list}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    tracks: state.tracks,
    error: state.error,
    country: state.countrySearched
  };
};

export default connect(mapStateToProps)(TrackList);

Я хочу иметь возможность вернуться к компоненту home с помощью кнопки home. Пожалуйста, помогите!

Answer 1

Так что я понял это.Оказывается, у меня был некоторый код в подкомпоненте SearchField внутри компонента Home, который перенаправлял приложение обратно на /results.Однажды я убрал, что это работает как шарм!Единственное изменение, которое я должен был сделать, заключалось в том, чтобы обернуть connect() и SearchField с withRouter() и использовать this.props.history.push('/results') при отправке поиска, чтобы добраться до компонента TrackList для рендеринга.

Answer 2

вместо компонента ссылки, вы можете попробовать это?

<button onClick={() => props.history.push('/')}>Home</button>