标签: react-router-redux

我有一个关于使用react-router(与Redux结合)设置初始路由的问题.我已经设置了一些路由并基于我的Redux商店的状态,我需要始终将用户重定向到页面加载的某个路由.

我的路线目前的设置方式如下:

<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App} onEnter={redirectToInitialRoute}>
            <Route path="/send" component={OverviewPage} />
            <Route path="/thanks" component={ConfirmPage} />
            <Route path="/:categoryIdentifier" component={CategoryPage} />
        </Route>
    </Router>
</Provider>

我已将onEnter函数添加到我的根路由.我这样做了,因为我总是需要重定向页面加载,而不管用户进入应用程序的页面.我的onEnter功能的设置方式如下:

function redirectToInitialRoute (nextState, replace) {
    if (condition) {
        replace('/send');
    }
    else if (anotherCondition) {
        replace('/thanks');
    }
}

然而,这种设置会发生的情况是(例如)'anotherCondition'得到满足并重定向到'/ thanks'.由于onEnter是在根路由上传递的,因此再次触发redirectToInitialRoute.由于'anotherCondition'仍然是真的,重定向再次发生,导致重定向循环.

我想知道解决这个问题的最佳方法是什么？任何帮助是极大的赞赏.提前致谢!

我想在Redux中间件中提取URL参数,以便分派操作并在有效负载中使用这些值.

我想在使用生成的url从api收到成功响应后打开一个url.我试图在reducer中打开这个url,如下所示:

window.open(url, '_blank');

这似乎适用于大多数浏览器,但在safari中不兼容.

任何想法如何实现跨浏览器兼容？有没有办法用react-router-redux做到这一点？

谢谢!

更新:我需要打开一个外部URL,而不是项目中的路由,所以可能是react-router不是解决方案

我正在努力让我的React/Redux应用程序根据操作更新URL.我做了很多环顾四周.我以为我有一个处理它,但显然我错过了一些东西.我还有其他正确响应的减速器.

目前,我只是想记录行动.

路由减速器

const initialState = { locationBeforeTransitions: null };

export default function routing(state = initialState, action)
{
  switch (action.type)
  {
    case 'LOCATION_CHANGE':
      console.log(action)

    default:
      return state

  }

}

商店

/*
  Things from other people
 */

import { createStore, applyMiddleware, compose } from 'redux'
import { syncHistoryWithStore }                  from 'react-router-redux';
import { browserHistory }                        from 'react-router'
import   thunkMiddleware                         from 'redux-thunk'
import   createLogger                            from 'redux-logger'

/*
  Things from us
 */

import { fetchSuitesAndFails, fetchResults } from './actions/actions';
import   rootReducer                         from './reducers/index' …

我正在建立一个服务,其他公司可以在那里举办社区活动companyname.mydomain.com.我有一个Redux减速机叫做company该公司的某些状态.我希望能够根据请求的子域同构地获取有关该公司的数据.

如果我有一个功能getSubdomain:

function getSubdomain(host) {
  const hostWithoutPort = host.split(':')[0];
  return hostWithoutPort.split('.').slice(0, -2).join('.');
}

然后在客户端上我通过执行以下操作来获取子域:

const subdomain = getSubdomain(window.location.host);

在服务器上,由于窗口不可用且每个请求的主机不同,我会这样做:

const subdomain = getSubdomain(request.headers.host);

基于此子域正确同构获取公司数据的正确策略是什么？我想也许我可以用状态中设置的子域来初始化我的商店？

我已经浏览了我可以找到的用于使用 redux 和 react-router 构建 React 应用程序的所有文档和示例项目，但是我似乎无法弄清楚如何在我调度操作时更新我的​​ redux 状态。正如您在此屏幕截图中看到的，动作正在正确调度，但我的 store/nextState 没有更新。

行动：

export function updateUsername(username) {
  return { type: types.UPDATE_USERNAME, username };
}

REDUCER（编辑：我已经尝试了这两种变体）：

   /* first variation */
   const username = (
      state = '',
      action,
    ) => {
      switch (action.type) {
        case types.UPDATE_USERNAME:
          return Object.assign({}, state, {
            username: action.username,
          });
        default:
          return state;
      }
    };

  /* second variation */
  const username = (
    state = '',
    action,
  ) => {
    switch (action.type) {
      case types.UPDATE_USERNAME:
        return action.username;
      default:
        return …

我想在成功登录后重定向到新页面.路线(V4)使用如下:

import { browserHistory } from '....browser_history_signleton';
...

class App extends Component {
  render() {
    const { authentication: { isSignedIn } } = this.props;
    return (
      <ConnectedRouter history={browserHistory}>
        <div>
          <Header/>
          <Route exact path="/" component={Home}/>
          <PrivateRoute isAuthorized={isSignedIn} path="/page1" component={PageOne}/>
          <PrivateRoute isAuthorized={isSignedIn} path="/page2" component={PageTwo}/>
        </div>
      </ConnectedRouter>
    );
  }
}

传奇看起来像:

import { browserHistory } from '....browser_history_signleton';

export function* loginSaga() {
  while (true) { // eslint-disable-line no-constant-condition
    try {
      const payload = yield take(LOGIN_SUBMIT);
      const raceResult = yield race({
        signin: call(loginRequest, payload),
        logout: …

我试图了解如何使用router-flux并且具有类似于具有多个故事板的多个场景/子场景,以便我可以为用户注册过程创建场景,然后一次用户注册的场景并登录.

目前我这样做但是没有给我预期的结果

class NavigationRouter extends Component {
  render () {
    return (
      <Router>
        <Scene key='drawer' component={NavigationDrawer} open={false}>
          <Scene key='root' tabs={true}>
            <Scene key='account' hideNavBar={true} >
              <Scene initial key='Login' component={Login} title='Login' />
              <Scene key='SignUp' component={SignUp} title='SignUp' />
              <Scene key='Account' component={Account} title='Account' />
              <Scene key='Venue' component={Venue} title='Venue' />
            </Scene>
            <Scene key='auth' renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
              <Scene key='MenuItems' component={MenuItems} title='Your Menu' />
              <Scene key='Orders' component={Orders} title='Orders' />
            </Scene>
          </Scene>
        </Scene>
      </Router>
    )
  }
}

登录/注册过程的第一部分不应显示导航栏并允许用户返回上一步.

第二部分应允许登录用户访问导航栏和侧面绘制其中定义的项目

我试图react在用户从一个页面/路由导航到另一个页面/路由时更新历史记录.但是对于我应该使用什么方法来实现这个以及为什么而感到困惑

import { browserHistory } from 'react-router'
browserHistory.push('/bag')

要么

import { routerMiddleware, push } from 'react-router-redux'
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

store.dispatch(push('/bag'))

请帮忙.提前致谢 :)

我正在使用react,redux和react-redux-router.当我运行一个应用程序时,我收到一个错误.我不明白它与我的App.js中的react函数有什么关系.在我看来,问题在于代码中的其他地方.

错误如下:

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
 in App
 in Router (created by ConnectedRouter)
 in ConnectedRouter
 in Provider       
 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

我的javascript App文件代码如下所示.

 import React from 'react';
 import Header from './common/Header';
 import HomePage from …