Обнаружение предыдущего пути в ответном маршрутизаторе?

Ответ 1

Вы можете сохранить предыдущий путь в методе жизненного цикла componentWillReceiveProps. Логика очень близка к примеру, представленному в разделе раздел устранения неполадок react-router docs.

<Route component={App}>
  {/* ... other routes */}
</Route>

const App = React.createClass({
  getInitialState() {
    return { prevPath: '' }
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.location !== this.props.location) {
      this.setState({ prevPath: this.props.location })
    }
  }
})

И в последнее время доступ к нему из состояния.

Ответ 2

Вы можете передать состояние с помощью компонента <Link>, в данном случае это путь:

<Link to={{pathname: '/nextpath', state: { prevPath: location.pathname }}}>Example Link</Link>

Затем вы можете получить доступ к prevPath из this.props.location.state в следующем компоненте

Ответ 3

Если вы используете react-router-redux, вы можете создать редуктор, который перехватывает события, отправленные обработчиком реакции-маршрутизатора.

export default function routerLocations(state = [], action) {
  switch (action.type) {
    case "@@router/LOCATION_CHANGE":
      return [...state, action.payload]
    default:
      return state;
  }
}

Ответ 4

Если вы используете компонент <Redirect />, вы можете добавить свойство from, которое будет добавлено в location.state в компоненте, на который вы перенаправляете.

// in the redirecting component
<Redirect
to={{
  pathname: '/login',
  state: { from: location }
}}
/>

//in the other component you redirected to
...
const { location } = props.location.state;
...

Ответ 5

Для React Router 5 и Redux вы можете прослушать изменения местоположения и сохранить последний путь в магазине.

Определите действие и редуктор для ветки вашего штата, напр. misc:

// Partial state
const miscState = {
  prevPath: '',
  // ...other properties
}

// Action creator
export const updatePrevPathAction = path => ({
  type: 'misc/prev-path',
  payload: path,
})

// Partial reducer
export const miscReducer = (state = miscState, action) {
  switch (action.type) {
    case 'misc/prev-path':
      if (state.prevPath === action.payload) {
        state = { ...state, prevPath: action.payload }
      }
      break
    // ...handle other actions
  }
  return state
}

Затем, при создании магазина, если вы используете пользовательскую историю браузера:

// Import the history
import { browserHistory } from 'your-singleton-loc/browser-history'
import { updatePrevPathAction, miscReducer } from './misc-state'

// ...
// Create the store
const store = configureStore(...)

// Create a listener for browser history
const pathListener = loc => {
  store.dispatch(updatePrevPathAction(loc.pathname))
}
// Register the listener
browserHistory.listen(pathLisneter)
// Save the current uri
pathListener(browserHistory.location)

// done
return store

Если вы не используете пользовательскую историю браузера, вы можете сделать то же самое в файле App.jsx, используя свойство истории маршрутизатора.

Это решение для всего приложения, и для него не требуется response-router-redux.