当我单击按钮时，网址已更改，但页面未更改，我必须刷新页面才能转到新页面答案

【问题标题】：when I click on the button the url is changed but the page is not and i have to refresh the page to go to the new page当我单击按钮时，网址已更改，但页面未更改，我必须刷新页面才能转到新页面
【发布时间】：2018-03-19 21:51:00
【问题描述】：

我正在使用 react-router-dom 4.0.0。当我点击按钮时，网址已更改，但页面未更改，我必须刷新页面才能转到新页面。

  render() {         
        return (             
                <div className='text-xs-right' >
                    <Link to="/posts/new" >
                        <button type="button" className="btn btn-primary" > Add a Post </button>
                    </Link>
                </div>                   
        );
    }

这是我的路由器：

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


import reducers from './reducers';
import PostsIndex from './components/postsIndex';
import NewPost from './components/newPost';


const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router>
      <div>
        <Route exact path={'/'} component={PostsIndex} />
        <Route exact path={'/posts/new'} component={NewPost} />
      </div>
    </Router>
  </Provider>
  , document.querySelector('.container'));

这是我的依赖：

"dependencies": {
    "axios": "^0.18.0",
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "react-router-dom": "^4.0.0",
    "redux": "^3.0.4",
    "redux-promise": "^0.5.3"
  }

我找到了解决方案，但仍然不知道为什么我以前的代码不起作用。下面的代码虽然有效：

 <Switch>
    <Route path={'/posts/new'} component={NewPost} />
    <Route path={'/'} component={PostsIndex} />
  </Switch>

为什么我的第一种方法不起作用？

【问题讨论】：

标签： reactjs react-router-v4 react-router-dom

【解决方案1】：

发生这种情况的原因是 Switch 匹配它找到的与 Route 匹配的第一个匹配项。在您的情况下，当/ 高于/posts/new 时发生的事情是/ 也匹配/posts/new，因此它呈现/ 并且没有检查剩余部分。当你把它倒序排列时，当链接是 /posts/new 时，它首先匹配它并且没有检查 / 所以你得到了它是正确的。

或者，您可以传递 exact 属性，以便它仅在准确的情况下匹配链接。然后就可以写了

 <Switch>
   <Route path={'/'} exact component={PostsIndex} />
   <Route path={'/posts/new'} component={NewPost} />
  </Switch>

现在 / 将仅在链接完全是 / 时匹配，因此您将获得预期的结果。

让路径为/one，location.pathname 为/one/two。如果exact 为false，则路径/one 将匹配/one/two，而如果exact 为true，则不会。

【讨论】：

我的主要问题是为什么当我使用

点击按钮后 url 发生变化，但页面没有 di 必须刷新页面
原因是路径/posts/new也匹配/。所以它会渲染'/'。转到 github.com/ReactTraining/react-router/blob/master/packages/… 并阅读标题 exact: bool
但是如果你注意到我把 exact 放在那里，所以确切的路径会匹配

【解决方案2】：

好的，找到了解决方案，我只需要将我的包更新为：

    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",

现在无需刷新页面即可正常工作：

<Router>
      <div>
          <Route exact path={'/'} component={PostsIndex} />
          <Route exact path={'/posts/new'} component={NewPost} />
      </div>
    </Router>

【讨论】：