反应路由器链接不改变 URL 或组件答案

【问题标题】：React Router Link not changing URL or component反应路由器链接不改变 URL 或组件
【发布时间】：2019-09-03 00:55:56
【问题描述】：

我有一个 Spotify 曲目搜索应用程序，它有两个主要组件，Home 和 TrackList。我正在使用 React-Redux 来管理状态。当Home 中的搜索字段被提交并成功时，Tracklist 被渲染。我有一个主页按钮，它包含在TrackList 组件内的Link 标记中，以便我可以返回“主页”。

我遇到的问题是，当我单击按钮时，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);

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

【问题讨论】：

你的代码对我来说很好，你能提供一个codepen或类似的吗？ codesandbox.io/s/7m90pkm5k0?from-embed
从您的组件中删除该重定向组件并检查。
@josemigallas 我要包含的文件太多了，因为我还依赖于一些动作和减速器，它们从快速后端服务器接收信息，当其中一个家庭子-组件安装。
@DehandeCroos 试过了，但没有运气。正如我上面提到的，主页按钮确实起作用，但只有当我刷新 TrackList 组件匹配的 url 路径并且它不包含任何数据时。
我建议您简化并重试，以隔离错误。我将您的课程（没有 redux）复制到一个代码盒中，它工作正常。

标签： reactjs react-redux react-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

代替链接组件，你可以试试这个吗？

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

【讨论】：

试过了。仍然有同样的问题。