标签: react-router-redux

我们有一个讲座和章节列表,用户可以在其中选择和取消选择它们.这两个列表存储在redux存储中.现在我们想要在url的hash标签中保留选定的讲座slugs和章节slugs的表示,并且对url的任何更改也应该更改存储(双向同步).

什么是使用react-router甚至react-router-redux的最佳解决方案？

我们无法找到一些很好的例子,其中react路由器仅用于维护url的hash标记,并且只更新一个组件.

谢谢!!!

由于我正在使用react-router来处理反应应用程序中的路由,所以我很好奇是否有办法重定向到外部资源.

说某人点击:

example.com/privacy-policy

我希望它重定向到:

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

我正在寻找零帮助,以避免在我的index.html加载时用简单的JS编写它,例如:

if ( window.location.path === "privacy-policy" ){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

我有一个带搜索面板的网页.搜索面板有几个输入字段:id,size,...

我想要的是当用户设置搜索值(例如:id = 123和size = 45)并按下搜索按钮时:

1. 应使用新搜索值(id = 123和size = 45)更新Redux reducer中的searchState
2. 网址应更改为" http:// mydomain/home？id = 123&size = 45 "

另一方面,如果用户将URL更改为http:// mydomain/home？id = 111&size = 22,则:

1. reducer中的searchState应该用新的搜索值更改(id = 111和size = 22)
2. UI搜索面板输入应使用新值更新(id = 111和size = 22)

如何达成目标？我应该使用什么路由器(react-router,redux-router,react-router-redux ot other)？

导航到另一个页面时出现问题,其位置将保持与之前的页面相同.所以它不会自动滚动到顶部.我也试过window.scrollTo(0, 0)在onChange路由器上使用.我也使用scrollBehavior来解决这个问题,但它没有用.对此有何建议？

我必须根据浏览历史实现一些业务逻辑.

我想做的是这样的:

reactRouter.onUrlChange(url => {
   this.history.push(url);
});

当URL更新时,有没有办法从react-router接收回调？

我正在尝试使用TypeScript的react路由器.但是,我在使用withRouter功能时遇到了一些问题.在最后一行,我得到了非常奇怪的错误:

Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'RouteComponentProps<any>'.
      Property 'match' is missing in type '{}’

代码如下:

import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface HomeProps extends RouteComponentProps<any> {
}

interface HomeState { }

class Home extends React.Component<HomeProps, HomeState> {
  constructor(props: HomeProps) {
    super(props);
  }
  public …

目标:在加载反应路由器路由时,调度Redux操作,请求异步Saga工作程序获取该路由的基础无状态组件的数据.

问题:无状态组件仅仅是函数,没有生命周期方法,例如componentDidMount,所以我不能(？)从函数内部调度Redux操作.

我的问题部分与将有状态React组件转换为无状态功能组件有关:如何实现"componentDidMount"类功能？,但我的目标是仅发送一个Redux动作,要求将数据异步填充到商店(我使用Saga,但我认为这与问题无关,因为我的目标是仅发送一个普通的Redux动作),之后由于数据支柱的改变,无状态组件将重新渲染.

我正在考虑两种方法:使用react-router的一些功能,或Redux的connect方法.是否有一种所谓的"反应方式"来实现我的目标？

编辑:到目前为止我唯一提出的解决方案是在mapDispatchToProps中调度动作,这样:

const mapStateToProps = (state, ownProps) => ({
    data: state.myReducer.data // data rendered by the stateless component
});

const mapDispatchToProps = (dispatch) => {
    // catched by a Saga watcher, and further delivered to a Saga worker that asynchronically fetches data to the store
    dispatch({ type: myActionTypes.DATA_GET_REQUEST });
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(MyStatelessComponent);

然而,这似乎有点脏,而不是正确的方式.

我刚开始学习React并且遇到了这个错误.

未捕获的TypeError:无法在新路由器上读取未定义的属性"pathname"

这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我以下的教程使用React-Router 2.0.0,但在我的桌面上我使用的是4.1.1.我尝试搜索更改,但未能找到有效的解决方案.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

我已经使用react-router版本4 设置了React.当我直接在浏览器上输入URL时,路由工作正常,但是当我点击链接时,URL在浏览器上发生了变化(例如http:// localhost:8080/categories),但是内容不会更新(但如果我刷新,它会更新).

以下是我的设置:

该Routes.js设置如下:

import { Switch, Route } from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

我在Nav.js中使用的链接如下:

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

该App.js如下:

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav …

我正在阅读react-router-redux示例,我很困惑,有什么区别:

import { Redirect } from 'react-router-dom'

...

<Redirect to='/login' /> 

和

import { push } from 'react-router-redux'

...

push('/login')