标签: react-router-redux

这是我的入口点文件:

import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router, Route } from 'react-router'
import { syncReduxAndRouter, routeReducer } from 'redux-simple-router'
import reducers from './reducers'

import App from './containers/app.jsx'
import About from './about.jsx'
import Dashboard from './dashboard/index.jsx'

const reducer = combineReducers(Object.assign({}, reducers, {
    routing: routeReducer
}))
const store = createStore(reducer)
const history = createBrowserHistory()

syncReduxAndRouter(history, store)

const routes …

使用"react-router-redux"时如何获得当前位置？

这是routing州:

{
    routing: {
        locationBeforeTransition: {
            pathname: "/foo",
            search: "",
            hash: "",
            state: null,
            action: "PUSH",
            key: "e8jfk"
        },
        query: null,
        $searchBase: {
            search: "",
            searchBase: ""
        }
    }
}

我可以清楚地访问当前位置state.routing.locationBeforeTransition.pathname,但名称"locationBeforeTransition"似乎是上一页的位置,而不是当前位置.这似乎很奇怪,这是我的路由状态中唯一的属性.我怀疑我做错了什么.

这是一个只有路由的简化reducer:

reducer.js

import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { browserHistory } from 'react-router';
import thunkMiddleware from 'redux-thunk';

const reducer = combineReducers({ 
  routing: routerReducer, 
});

export const store = createStore(reducer, {}, compose(
    applyMiddleware(
      routerMiddleware(browserHistory), …

我正在尝试在分派操作时更改URL参数。它链接到实验中的下一个“案例”，并在URL中以整数形式显示。

我如何想象：
初始URL /experiment/2
分派操作{ type: 'NEXT_CASE' }
新URL/experiment/3

研究
基于此答案（尽管有关于redux-router），我想到可以通过访问还原器中的当前路径/ URL store.getState().routing。

但是我想要在路由中定义和解析的参数。（显然，我可以从路径中手动解析它们，但是如果路径结构发生更改，那似乎是不可扩展的，也不是面向未来的。）

当前解决方案
到目前为止，我基于匹配的最佳尝试（他们说这不适合客户端使用）：

export default store => next => (action:Action<any>) => {
  if (action.type == Types.NEXT_CASE) {
    match(
      { routes: Routes, location: store.getState().routing.locationBeforeTransitions.pathname },
      (error, redirectLocation, renderProps: any) => browserHistory.push(RouteBuilder.experiment(parseInt(renderProps.params.caseIndex) + 1))
    );
  }

  return next(action);
}

其中Routes和RouteBuilder定义如下：

export const RouteBuilder = {
  experiment: (caseIndex: number) => `/experiment/${ caseIndex }`
};

export const Routes …

我正在尝试在容器中获取反应路由器的当前路径,因此我可以将其传递给将改变其可见性过滤器的子组件.

更具体地说,我正在尝试使导航菜单突出显示当前活动的页面.

我正在使用react,redux,react-router和react-router-redux,所以我可以从redux商店访问路由器状态.

来自react-router-redux的文档,它说要做这样的事情:

function mapStateToProps(state, ownProps) {
  return {
    id: ownProps.params.id,
    filter: ownProps.location.query.filter
  };
}

这是我的容器组件:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import {
  Segment as UISegment,
} from 'semantic-ui-react'
import NavMenu from '../components/NavMenu'

class MenuBar extends Component {
  static propTypes = {
    path: PropTypes.string.isRequired
  }

  render() {
    const { path, } = this.props

    return (
      <UISegment>
        <NavMenu activePath={path} />
      </UISegment>
    )
  } …

当用户在onEnter处理程序中点击新路线/路径时，我试图找到一种方法来读取之前的路线/路径。

我有一个像这样结构的 React 路由器：

    <Router history={history}>
      <div className="index">
        <Route
          path="/"
          component={ComposedAppComponent}
          onEnter={this.onEnterHandler.bind(this)}
        >
          <Route name="streamKey" path=":streamKey">
            <Route name="articleUri" path="(**)" />
          </Route>
        </Route>
      </div>
    </Router>

函数 ,onEnterHandler看起来像这样：

  onEnterHandler(nextRouteState) {
    const { streamKey, splat } = nextRouteState.params;

    const nextPath = `/${streamKey}/${splat}`;
    const prevPath = // HOW DO I GET THE PREVIOUS PATH?
  }

我似乎无法找到一种方法来读取用户所在的先前路线路径……我需要在新路线和先前路线之间进行比较。任何关于如何解决这个问题的意见都非常感谢。:)

干杯!

我正在使用react-router和react-router-redux来实现SPA.我想实现这样的UI:

我有一个列表的主要思想Entitnes,如果我点击的Entity,url从改变http://domain/entities到http://domain/entities/id,这里id是一个Entitiy的id和具体的阵营组件加载.

为了执行导航我正在使用push方法,react-router-redux但我也可以输入url路径.但我需要以某种方式验证urlparams.我想检查id,是否格式正确并且特定实体是否存在,如果不存在,我应该回滚url到先前的状态,然后显示错误警报.

我想这是可能的,但我是一个非常初学者React,所以我想听听你的任何建议.

提前致谢.

我正在将应用状态的一部分从商店移到URL。

我目前正在使用redux来管理我的应用程序状态以及重新选择以创建选择器。选择器从redux存储中的状态计算派生值（原则上，这是它们的唯一输入）。

现在状态的一部分将包含在URL中，所以我不确定如何去阅读它。

我已经看过react-router-redux，乍一看似乎是解决方案（实际上，我可以达到我想要使用的值state.routing.locationBeforeTransitions.query），但是鉴于这似乎并不是正确的方法在他们的文档中说：

您不应直接从Redux存储中读取位置状态。

还有另一种方法可以访问位置状态，还是应该忽略此警告并在选择器中使用它？

我想在组件中触发一个动作。这是一个演示组件，不需要Redux感知。路由器的实现是通过react-router-redux完成的。

main.js：

let store = createStore(rootReducer)

const history = syncHistoryWithStore(hashHistory, store)

class RenderClass extends Component {
  render() {
    return (
        <Provider store={store}>
            <Router history={history}>
                <Route path="/" component={MainLayout}>
                    <Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}></Route>
                    <Route name="personalInformation" path="/personalInformation/:employeeId" url={URI} component={PersonalInformation} />
                    .....
                </Route>
            <Router>
        </Provider>
        );
    }
}   

App.jsx：

import * as Actions from './action-creator';
const MainLayout = React.createClass({
                render: function() {

                    const { dispatch, list } = this.props;
                    let actions = bindActionCreators(Actions, dispatch);
                    console.log(actions);

                    return (
                        <div className="wrapper">
                            <Header actions={actions} list={list} params={this.props.params} …

我正在使用下一个（5.0.0）版本react-router-redux，它与react-router 4.x兼容。

我的应用程序有两个页面/login和/home.

/login如果用户访问不存在的页面，我正在尝试将页面重定向到。这是我的代码

import { Route, Redirect } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route path="/login" render={() => (
          isSignedIn ? <Redirect to="/home" /> : <Login />
        )}/>

        <Route path="/home" component={Home} />

        <Redirect to="/login" />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

如果我删除<Redirect to="/login" />并且用户已经登录，当他打开页面时/home，应用程序将直接转到主页，这很好。

但是，使用 时<Redirect to="/login" />，当用户打开页面时/home，应用程序将首先重定向到/login，然后返回到/home。

如何避免这种两次重定向？谢谢

在此处输入图片说明

代码：这是我的index.js文件

index.js

    import { Provider } from "react-redux";
    import { createStore } from 'redux';

    import App from './app';

    import reducer from './store/reducer';

    const store = createStore(reducer);
    console.log("Store ..."+store);
    console.log(Provider);

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

代码：这是我的reducer.js文件

    reducer.js
    import * as actionTypes from './actions';

    const initialState = {
    assistants:[],
    fetchInProgress:true
    }

    const reducer = (state = initialState, action) =>{

    return state;
    };

    export default reducer;

代码：这是我的app.js文件app.js

class App extends Component{
render(){
return(
  <HashRouter>
    <Switch>
    <Route exact path="/login" name="Login Page" …