Question

我正在使用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>

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

Answer 1

确定找到了解决方案，我只需要将我的软件包更新为：

    "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>

Answer 2

发生这种情况的原因是Switch匹配它找到的匹配路线的第一个匹配项。在您的情况下，当/高于/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。如果确切为假，则路径/one将匹配/one/two，而如果确切为真，则不会。{/ p>

当我点击按钮时，网址被更改但页面没有，我必须刷新页面才能转到新页面

2 个答案: