• react-router v4 的版本中 如何实现跳转功能？（react router跳转页面）
• ''react-router-redux''到''connected-react-router''
• ./node_modules/react-router-dom/react-router-dom.js尝试导入错误：未从“ react-router”导出“ Navigate”
• connected-react-router: react-router-dom 必须总是最后安装
• javascript – React Router this.context.router.push不会重新安装组件

react-router v4 的版本中 如何实现跳转功能？（react router跳转页面）

问题

当我们使用react-router v3的时候，我们想跳转路由，我们一般这样处理

1. 我们从react-router导出browserHistory。
2. 我们使用browserHistory.push()等等方法操作路由跳转。

类似下面这样

import browserHistory from 'react-router';

export function addProduct(props) {
  return dispatch =>
    axios.post(`xxx`,props,config)
      .then(response => {
        browserHistory.push('/cart'); //这里
      });
}

but!! 问题来了，在react-router v4中，不提供browserHistory等的导出~~

那怎么办？我如何控制路由跳转呢？？？

解决方法

使用 withRouter

withRouter高阶组件，提供了history让你使用~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

这是官方推荐做法哦。但是这种方法用起来有点难受，比如我们想在redux里面使用路由的时候，我们只能在组件把history传递过去。。

就像问题章节的代码那种场景使用，我们就必须从组件中传一个history参数过去。。。

''react-router-redux''到''connected-react-router''

背景：
redux和react-router两者协同工作会出现，路由变化而store无法感知到，的问题。

react-router-redux ：
一. 作用：
react-router-redux 是 redux 的一个中间件，加强了React Router库中history这个实例，以允许将history中接受到的变化反应到state中去。

使用方法1:

使用syncHistoryWithStore包裹browserHistory，当url改变时，会自动触发 LOCATION_CHANGE action，更改store中维护的 locationBeforeTransitions 状态对象，实现store状态的更新。

// 只需要传入react-router中的history以及redux中的store,就可以获得一个增强后的history对象。
// 将这个history对象传给react-router中的Router组件作为props，就给应用提供了观察路由变化并改变store的能力。
import { syncHistoryWithStore, routerReducer } from ''react-router-redux''
const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)
const history = syncHistoryWithStore(browserHistory, store)
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App} />
    </Router>
  </Provider>,
  document.getElementById(‘app'')
)

// 对应的reducer.js
export const LOCATION_CHANGE = ''@@router/LOCATION_CHANGE''

const initialState = {
  locationBeforeTransitions: null
}

1. 使用方法2:

   手动触发路由的跳转，同时需要。

   直接store.dispatch(push(''/foo''))，会触发 CALL_HISTORY_METHOD 这个action，调用中间件，等同于调用 browserHistory上相应的push方法。

// 触发路由跳转（使用redux action的方式来触发）
import { createStore, combineReducers, applyMiddleware } from ''redux'';
import { routerMiddleware, push } from ''react-router-redux''
// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)
// 使用dispatch手动触发 push 等操作
store.dispatch(push(''/foo''))

源码的具体实现：

// import 的 push, replace, go, goBack, goForward之类的方法出自： action.js
export const push = updateLocation(''push'')

function updateLocation(method) {
  return (...args) => ({
    type: CALL_HISTORY_METHOD,
    payload: { method, args }
  })
}

//中间件代码
export default function routerMiddleware(history) {
  return () => next => action => {
    if (action.type !== CALL_HISTORY_METHOD) {
      return next(action)
    }

    const { payload: { method, args } } = action
    history[method](...args)       //这里直接改变browserHistory
  }
}

二. react-router-redux原理图

CALL_HISTORY_METHOD，这类 action 一般会在组件内派发，它不负责 state 的修改，通过 routerMiddleware 后，会被转去调用 history。

面临的问题：
react-router-redux 只兼容 react-router 2.x and 3.x，所以要改成使用 connected-react-router 来兼容 react-router 4.x。

解决：

把之前 react-router-redux 中 store.dispatch(push(''/foo'')) 这么使用的，直接改成 history.push(''/foo'') 之类的。

参考文章：
https://blog.csdn.net/weixin_... React 的路由状态管理

./node_modules/react-router-dom/react-router-dom.js尝试导入错误：未从“ react-router”导出“ Navigate”

如何解决./node_modules/react-router-dom/react-router-dom.js尝试导入错误：未从“ react-router”导出“ Navigate”

./node_modules/react-router-dom/react-router-dom.js Attempted import error: ''Navigate'' is not exported from ''react-router''.

react-router-dom的版本是6.0.0-alpha.2，而react-router是5.2.0。 两者均已正确安装。我不确定如何解决此错误。有人可以给我任何可能的解决方法吗？

我的代码中甚至没有<Navigate to=?>行。

解决方法

connected-react-router: react-router-dom 必须总是最后安装

如何解决connected-react-router: react-router-dom 必须总是最后安装

我从我的开发文件夹中排除了我的 node_modules 文件夹，并且只有一个指向它的软链接（因此它不会同步到云）。我使用 connected-react-router 并且一切正常，直到我之后安装任何其他 npm 包。然后我在浏览器中收到错误：Uncaught Error: Invariant Failed: You should not use <Switch> outside a <Router> 当我再做 npm install react-router-dom 时，一切都会恢复正常。出于某种原因，react-router-dom 必须始终是最新安装的软件包。

即使我直接包含 node_modules 文件夹，而不是作为软链接，也会出现此问题。有没有人知道这是怎么发生的以及如何解决这个问题？

javascript – React Router this.context.router.push不会重新安装组件

selectRelatedJob(slug) {
  JobActionCreators.fetchJobPage(slug);
  JobsActionCreators.getRelatedJobs({'sl': slug});
  this.context.router.push({pathname: '/job',query: {sl: slug}});
}

<Route component={App}>
  <Route path="/" component={HomePage}/>
    <Route path="job" component={JobPage}/>
    <Route path="job/" component={JobPage}/>
  </Route>
</Route>

<Route path="job/:id" component={JobDetailPage} />

关于react-router v4 的版本中 如何实现跳转功能？和react router跳转页面的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于''react-router-redux''到''connected-react-router''、./node_modules/react-router-dom/react-router-dom.js尝试导入错误：未从“ react-router”导出“ Navigate”、connected-react-router: react-router-dom 必须总是最后安装、javascript – React Router this.context.router.push不会重新安装组件的相关知识，请在本站寻找。