React Router Link 更改路径，但不渲染新组件答案

【问题标题】：React Router Link changes path, but doesn't render new componentReact Router Link 更改路径，但不渲染新组件
【发布时间】：2018-05-25 01:19:40
【问题描述】：

我正在尝试使用 React Router 4.2.2 来加载一个名为 PostFocus 的组件，只要我点击一个“卡片”组件，并在其周围包裹一个链接。当我单击“卡片”时，路径会正确更改，但 PostFocus 组件未呈现。我在路线中做错了什么或错过了什么吗？我想不通。

代码如下：

class PostsList extends React.Component {
    render() {
        var createCards = this.props.posts.map((post, i) => {
            return (
                <div key={i}>
                    <Link to={`/${post.id}`}>
                        <Card title={post.title} subtitle={post.subtitle} date={post.date} id={post.id}/>
                    </Link>
                    <Route exact path={`/${post.id}`} render={(post) => (
                        <PostFocus content={post.content}/> 
                    )}/>
                </div>
            );
        });
        return (
            <div>
                {createCards}
            </div>
        );
    }

应用组件：

import React from 'react';
import PostsList from '../containers/posts_list.js';
import {withRouter} from 'react-router';

class App extends React.Component {
    render() {
        return(
            <div>
                <PostsList />
            </div>
        );
    }
}

export default withRouter(App);

index.js 代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { BrowserRouter } from 'react-router-dom';

import App from './components/App.jsx';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
        <Provider store={createStoreWithMiddleware(reducers)}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
, document.getElementById('root'));

【问题讨论】：

检查这个stackoverflow.com/questions/44356360/…，它应该可以解决你的问题
我进行了更改，但仍然无法正常工作:(
你在哪里做的改变
在我的 App 组件中。我会在问题中发布代码
您的router.js 文件（或同等文件）是什么样的？我假设您已将 PostFocus 路由/组件添加到路由器定义中？

标签： javascript reactjs react-redux react-router-v4

【解决方案1】：

我也遇到了同样的问题。我用一个技巧把它修好了。你的 App.js 或 index.js 中可能有 BrowseRouter，我的 index.js 中有这样的：

ReactDOM.render(<BrowserRouter>
                    <App />
                </BrowserRouter>, document.getElementById('root'))

我把它改成了：-

ReactDOM.render((
                    <BrowserRouter>
                      <Route component={App} />
                    </BrowserRouter>
                  ), document.getElementById('root'))

它被骗了，实际上我们通过这样做让路由器查看我们的完整应用程序，因此它还检查路由路径并自动呈现视图。希望对你有帮助。

注意：- 不要忘记在 index.js 中导入 Route

【讨论】：

哇。谢谢。
我有同样的问题，但在我的项目中这不起作用
@Tom Karnaski，能否请您提供您的代码 sn-p 以便我尝试找出答案。
pastebin.com/abKzwgpK 或 github.com/piratezxe/SimpleGalleryAppClient
@TomKarnaski 嗨.. 请在下面找到解决方案。您需要导入 BrowserRouter 并实现。

【解决方案2】：

@汤姆·卡纳斯基嗨...抱歉回复晚了，我没有时间处理它。您的代码正在我的系统中运行，我无权在您的仓库中推送分支.. 制作您的 App .js 如下所示.. 它肯定会工作..

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Navbar from './Components/Navbar/Navbar';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route component={Navbar}/>
        </div>
      </Router>
    );
  }
}

export default App;

【讨论】：

【解决方案3】：

我解决了这个问题，只需使用标签而不是链接助手。不确定它是否正确，但它对我有用，希望对其他人有帮助。

【讨论】：