Question

我有一个Spotify跟踪搜索应用，其中包含两个主要组件，Home和TrackList。我正在使用React-Redux来管理状态。 Tracklist中的搜索字段被提交并成功后，Home会被渲染。我有一个主页按钮，该按钮包装在Link组件内的TrackList标记中，因此我可以返回“主页”。

我遇到的问题是，当我单击按钮时，URL不会更改，home组件也不会呈现。它所做的全部工作是随着Spotify iframe重新加载而触发TrackList组件的明显刷新。但是，如果我在以下URL上刷新页面：localhost:3000/results，则没有列出曲目（按预期），但是按钮现在可以使用了！它带我回到home组件，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);

我希望能够通过“主页”按钮返回到主页组件。请帮忙！

Answer 1

代替链接组件，您可以尝试吗？

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

Answer 2

所以我知道了。原来，我在img组件内的SearchField子组件中有一些代码，将应用程序重定向回Home。一旦我删除它，它就像一个魅力！我唯一要做的更改是将/results和connect()用SearchField包装，并在提交搜索以使用withRouter()组件进行渲染时使用this.props.history.push('/results')

React Router Link不更改URL或组件

2 个答案: