标签: react-router-redux

我有一个应用程序使用react @ 0.14,redux @ 3.05,react-router @ 1.0.3和redux-simple-router @ 2.0.2.我正在尝试根据存储状态为某些路由配置onEnter转换.转换挂钩成功触发并将新状态推送到我的商店,这会更改网址.但是,在页面上呈现的实际组件是路由匹配的原始组件处理程序,而不是新URL的新组件处理程序.

这是我的routes.js文件的样子

export default function configRoutes(store) {
  const authTransition = function authTransition(location, replaceWith) {
    const state = store.getState()
    const user = state.user

    if (!user.isAuthenticated) {
      store.dispatch(routeActions.push('/login'))
    }
  }

  return (
    <Route component={App}>
      <Route path="/" component={Home}/>
      <Route path="/login" component={Login}/>
      <Route path="/dashboard" component={Dashboard} onEnter={authTransition}/>
      <Route path="/workouts" component={Workout} onEnter={authTransition}>
        <IndexRoute component={WorkoutsView}/>
        <Route path="/workouts/create" component={WorkoutCreate}/>
      </Route>
    </Route>
  )
}

这是我的Root.js组件插入到DOM中

export default class Root extends React.Component {
  render() {
    const { store, …

我正在尝试修改react-router-redux的示例代码. https://github.com/rackt/react-router-redux/blob/master/examples/basic/components/Home.js

这是我的Home.js

class Home extends Component {
    onSubmit(props) {
        this.props.routeActions.push('/foo');    
    }
}

我也有一个mapDispatchToProps.

function mapDispatchToProps(dispatch){
    return bindActionCreators({ routeActions },dispatch);
}

当我调用onSubmit函数时,我收到了一个错误

Uncaught TypeError: this.props.routeActions.push is not a function

如果我在onSubmit中删除this.props,则URL中的键已更改,但它仍在同一页面上.从localhost:8080/#/?_k=iwio19到localhost:8080/#/?_k=ldn1ew

谁知道怎么修它？欣赏它.

我正在将Redact Ract应用程序重构为Redux.我已经确定了一些测试的动作和减速器.我在路由器和历史上得到了堆栈.
我收到错误:

未捕获的TypeError:无法在syncHistoryWithStore读取未定义的属性'listen'

从简单的代码:

//configureStore.jsx
import redux from 'redux';
import {buildingReducer, levelReducer, roomReducer} from 'reducers';
import {routerReducer} from 'react-router-redux';

export let configure = (initialState = {}) => {
    let reducer = redux.combineReducers({
        building: buildingReducer,
        level: levelReducer,
        room: roomReducer,
        routing: routerReducer
   });

   let store = redux.createStore(reducer, initialState, redux.compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f));

   return store;

};

&

//app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
import {Provider} …

我正在使用react-router-redux(https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)

安装

npm install --save react-router-redux@next

像这样实现:

<Route path='/resource/:id' component={Resource}/>

我正在尝试访问容器中id的参数,如下所示:

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps)
  return {...state.resource, id: ownProps.params.id}
}

如react-router-redux文档中所示.

我收到一个错误,说明ownProps.params是未定义的.这样可行:

const mapStateToProps = (state, ownProps) => {
  return {...state.resource, id: ownProps.match.params.id}
}

但是,当我记录ownProps时,我发现ownProps.match.params.id包含我需要的id.

这是实施中的变化还是我实施了错误的路线？谢谢

我一直在尝试将Redux集成到我的应用程序中,并且使用React-Router-Redux 5.0.0-alpha.6遇到了问题.

我收到错误:'react-router-redux'中找不到"export'syncHistoryWithStore'.官方指南说导入syncHistoryWithStore,我已经完成了:https: //github.com/reactjs/react-router-redux

我也查看了react-router-redux包里面,似乎没有任何syncHistoryWithStore的迹象.

我错过了什么？

这是我的index.js.Redux正在工作,但我无法使用ConnectedRouter推送一条新路线,显然这是由于浏览器的历史问题.

import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, syncHistoryWithStore, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

const store = configure();
const history = syncHistoryWithStore(createBrowserHistory(), store);

const navigation = (
  <Provider store={store}>
      <ConnectedRouter history={history}>
          <SystemManager>
            <div>
            <Route path="/" component={Dashboard}/>
            <Route path="/dashboard" component={Dashboard} />
            .....

            <Route component={NotFound} />
            </div>
          </SystemManager>
      </ConnectedRouter>
    </Provider>
); …

我正在迁移一个反应应用程序，并试图拆分它。基本上，我想将一些客户端反应路由重定向到绝对网址（或相对网址，但至少进行服务器往返，其中完成了反向代理）

注意

• 反应路由器 3.0.0
• 反应路由器-redux 4.0.7
• 该应用程序有这些网址
  • http://myhost/ => 主页
  • http://myhost/someroute1 => 第一个路由
  • http://myhost/someroute2 => 第二条路由
  • http://myhost/someroute3 => 第三条路线

现在一切都在反应之中。

路由看起来像这样：

<Provider store={store}>
  <Router history={history}>
    <Route path="/" component={Root}>
      <IndexRoute component={Home} />
      <Route path="/someroute1" component={Route1} />
      <Route path="/someroute2" component={Route2} />
      <Route path="/someroute3" component={Route3} />
    </Route>
  </Router>
</Provider>

目标是将路由“/”和“/someroute2”重定向到静态 url（服务器 url）。就这样：

• http://myhost/ => http://anotherhost/
• http://myhost/someroute1 => 保持反应路由
• http://myhost/someroute2 => http://anotherhost/anotherroute5
• http://myhost/someroute3 => 保持反应路由

问题很简单：是否可以以干净的方式用绝对 url 替换 React 路由器路由？

我听说过 Redirect 和 IndexRedirect 组件，但我不知道如何正确使用它，而且，由于缺乏反应/反应路由器，我不知道是否会有任何危险的副作用（在历史上）例如）。

我正在尝试在成功的身份验证过程（登录/注册后）之后移动用户，但是看起来我在互联网上找到的每个解决方案-stackoverflow / github问题/介质等-不起作用！

请在下面找到我的代码。

import { call, put, takeLatest } from 'redux-saga/effects'
import { push } from 'react-router-redux'

import { USER_LOGIN_SUCCEEDED, USER_LOGIN_FAILED, USER_LOGIN_REQUESTED } from '../actions/types'

import { login } from '../api'

function * loginUser (action) {
  try {
    const token = yield call(login, action.payload.email, action.payload.password)
    yield put({type: USER_LOGIN_SUCCEEDED, token: token})
    yield put(push('/dashboard'))
  } catch (error) {
    yield put({type: USER_LOGIN_FAILED, error: error.message})
  }
}

function * loginSaga () {
  yield takeLatest(USER_LOGIN_REQUESTED, loginUser)
}

export default loginSaga

not sure if its …

我正在 React 上开发一个通用搜索组件，它将过滤器、当前页面和一些其他参数放在 URL 查询字符串上（在 后面?）。

我目前使用URLSearchParams将查询字符串转换为 js 对象，然后返回查询字符串，如react-router-v4预期的那样

关键是我需要在查询字符串中存储一个对象，这样我就可以将搜索过滤器（可以有多个字段）与其他参数区分开来。

我发现我可以将对象转换为 JSON?filter.name=foo&filter.tag=bar ，并将所有内容存储在过滤器参数中，或者我可以使用点符号 ( ) 甚至方括号符号 ( )存储对象?filter[name]=foo&filter[tag]=bar，并在从 url 读取它们时相应地处理它们。

我倾向于选择 JSON 表示法，但是这种方法有什么问题吗？我应该事先知道任何限制吗？有更好的方法吗？

我一直试图弄清楚这一点,我越来越困惑.

我想在每次离开或改变路线时重置/改变Redux状态.我使用react-router-redux与history.listener调度的动作,每次路由变化

history.listen(location => store.dispatch(resetManualsCategory()));

行动创造者:

export function resetManualsCategory() {
    return {
        type: 'RESET_MANUALS_CATEGORY'
    }
}

减速器

export function manualCategories(state=[], action) {
    switch (action.type) {
        case 'SELECT_MANUALS_CATEGORY':
           [...]

        case 'RESET_MANUALS_CATEGORY':
            console.log('test reducer');
            return Object.assign({}, state, {
                manualCategory: 'test'
            })

        default:
            return state
    }
}

令我困惑的是,如果我刷新页面或在顶部导航中的路线上单击两次,状态会更新,但是单个路径更改不会影响redux状态,即使操作和reducer触发(显示测试消息)控制台).

我做错了什么,这里到底发生了什么？

我是 React 的新手，我已经使用 Facebook 的create-react-app设置了我的 React 项目。以下是核心文件：

索引.js

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import { createStore, applyMiddleware } from "redux";
import { Provider } from 'react-redux'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './containers/App';
import Routes from "./Routes";

const browserHistory = createHistory();
middleware = routerMiddleware(browserHistory);
const store = createStore(reducers, …