标签: react-router-redux

我正在使用React Native和Redux开发移动应用程序,我正面临着软件设计问题.我想调用REST API(异步操作)进行登录,如果该操作成功,则导航到主视图.我正在使用redux和thunk所以我已经实现了异步操作,所以我的主要疑问是:我应该把逻辑导航到主视图？

我可以直接从动作访问导航器对象并在那里执行导航吗？我应该在登录组件中执行此操作吗？(正如我已经这样做 - 检查下面的代码).

componentWillReceiveProps(nextProps){
    if(nextProps.errorLoginMsg){
        Alert.alert("Login Failed", nextProps.errorLoginMsg);
    }
    else if(!nextProps.user.isNull()){
      this.props.navigator.replace({name: 'main'});
    }
  }

我对组件中的逻辑没有信心.似乎不是一个好习惯.有没有其他方法可以做到这一点？

谢谢

是否可以thunk在特定路由上调用异步redux操作,并且在响应成功或失败之前不执行转换？

用例

我们需要从服务器加载数据并使用初始值填充表单.在从服务器获取数据之前,这些初始值不存在.

像这样的一些语法会很棒:

<Route path="/myForm" component={App} async={dispatch(loadInitialFormValues(formId))}>

我正在尝试将create-react-app部署到具有自定义域的GitHub页面上的相对路径。例如www.example.com/myproject

我使用react-router-dom，react-router-redux并react-router-bootstrap

我已经将主页设置为http://www.example.com/myprojectin packages.json（也尝试homepage = "."过），并且还为我的历史记录配置了基本名称：

...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

部署的应用程序可以正常运行www.mydomain.com/myproject，我可以通过应用程序链接进行导航。

但是当我尝试直接输入路径（例如www.example.com/myproject/account）或在子页面上刷新浏览器时，我得到了404 。

长期目标是按照此答案中的描述为开发环境和产品环境配置不同的相对路径，但首先我只需要使其在部署中工作即可。

使用react-router-redux,似乎获取路由信息的唯一方法是仅通过props.这是正确的吗？

这是我现在在应用程序中所做的大致内容:

<Provider store={Store}>
  <Router history={history}>
    <Route path="/" component={App}>
      <Route path="child/:id" />
    </Route>
  </Router>
</Provider>

应用

const App = (props) => 
  <div className="app">
    <Header />
    <Main {...props}/>
    <Footer />
  </div>

主要

const Main = (props) => 
  <div>
    <MessageList {...props}/>
  </div>

将MessageList

let MessageList = (props) => {
  const {id} = props;

  // now I can use the id from the route
 }

const mapStateToProps = (state, props) => {
  return {
    id: props.params.id
  };
};

MessageList = connect(mapStateToProps)(MessageList)

我会喜欢 …

我正在使用React + Redux,在阅读了react-router-redux和redux-router之后,在阅读了Dan Abramov的回答后,我决定使用"vanilla"react-router(我不关心时间旅行等等)这点).

剩下的唯一未决问题是如何处理不同路线的状态.每个路径子树在我的应用程序中可以是一个不同且独立的部分(特别是当它变大时).拥有一家商店来处理所有路线/页面仍然是一个好习惯吗？我(至少)不应该为每条主要路线路径设置不同的商店/州吗？

我认为路线应该是某种无国籍和独立的,这意味着如果我直接进入我的一个链接,它应该工作,并且不会知道其他兄弟路线.我应该把它反映到我的商店吗？

编辑

经过一番思考,我想使用不同的减速器+"CombineReducers"就可以了.我唯一需要验证的是,在导航时,以前的路线状态不会持续存在

我有以下代码：

<View>
  <Header />
  <List />
</View>

如果用户单击列表项中的编辑按钮，react-router则将页面从 更改/list为/list/{itemId}。这是一个新页面。用户填写一些信息并单击保存后，react-router更改回/list. 现在整个/list页面已重新渲染！

有没有办法缓存页面，以便react检测更改并仅重新渲染它们而不是再次渲染整个页面？

还应该可以直接渲染页面（而不是通过/list-> /list/{itemId}），所以modal我认为没有解决方案。

我正在使用react-router-redux v5.0.0-alpha.9，所以该解决方案应该与其兼容。它还应该与react-native和兼容react-dom。

我有一个应用程序使用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, …

我有一个特定的组件，希望在用户每次导航时收到通知。有什么方法可以访问传递到路由器的历史记录吗？

<Router history={history}>
   {// ...}
</Router>

子组件：

var Component = React.createClass({
   componentDidMount: function() {
     // history.listen(this.onRouteChange);
   },
   onRouteChange: function() {},
   render: function() {...},
});

我一直在尝试将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 组件，但我不知道如何正确使用它，而且，由于缺乏反应/反应路由器，我不知道是否会有任何危险的副作用（在历史上）例如）。