标签: react-router-redux

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

我想在每次离开或改变路线时重置/改变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, …

假设我有一些逻辑，用户可以从中选择一个选项列表。当用户选择一个选项时，应用程序状态和 URL 应反映此选择。我已经弄清楚了 URL 路由，但我想知道最佳策略。我想使用 redux-simple-router pushPath 并分派一个动作吗？redux-simple-router 是否有 API 可以直接通过路由改变应用程序的状态？或者我会在其他地方处理应用程序状态更改吗？代码如下：

    handleClick(value) {
        this.props.pushPath('/Options/' + value);
    }

    render() {
      return (
        <div className="container">
          <div>Search bar here</div>
           <div className={styles.tile_container}>
             {this.state.options.map(option =>
               <div name= {option.name} key={option.key}  onClick={this.handleClick.bind(this, option.name)}>{option.name}</div>
           )}
         </div>
      </div>
    );
  }

我的路线定义如下：

 <Router history={browserHistory}>
   <Route path="/" component={App}>
     <Route path="experiments">
       <IndexRoute component={Experiments} />
     </Route>
     <Route path="*" component={NoMatch}/>
   </Route>
 </Router>

当我访问 时/experiments，事情按预期工作，并呈现了 Experiments 组件。但是，当我手动输入带有查询参数的 URL 时，例如：/experiments?offset=50，路由不匹配！

但是当我使用 导航时<Link to={{ pathname='/experiments', query={offset:50} }} />，事情按预期工作。实验组件已呈现并this.props.location.query.offset设置为50。

当手动输入（或复制粘贴）带有查询字符串的 URL 时，如何使路由匹配？

似乎 route 应该自动匹配url-with-query-??string-not-matching-??react-router-route，但它似乎对我不起作用。

编辑： 我将问题缩小到包罗万象的路线 path="*"。当我删除这条路线时，一切正常（例如，当我访问时/experiments?offset=50）。但是，当存在全能 Route 时，即使它位于优先级列表的底部，也不会匹配任何路由。

使用react-router漂亮 URL的最佳方法是什么？所有 URL 都存储在 DB 中（总量约为400,000）。当我点击链接时，我需要解析组件以通过AJAX请求从服务器渲染并渲染它。

谢谢！

使用 react-router-dom 时，我是否应该能够创建路由并通过在 URL 中手动输入其路径来导航到它？

const App = () =>
<Provider store={store}>
    <Router>
        <div>
            <Route exact path="/" component={QuotesLandingPage} />
            <Route path="/prequote" component={LoadingSpinner} />
        </div>
    </Router>
</Provider>;

所以，我将在本地主机上，并且当我手动键入“ /prequote”来的端部url在navbar它不重定向到我已指定该组件，而不是将其抛出一个404。

这是预期的行为吗？

我一直在寻找答案并看到了一些建议，即配置 webpack（我正在使用 webpack）devServer.historyApiFallback = true应该可以工作，但它对我没有用。

我试图在退出后重定向到该页面。但是，每次我退出时，它都会成功引导页面。但是，我仍然收到错误

无法读取未定义的属性“类型”

“暂停捕获异常”的进一步研究，它与react-router-redux 相关。

所以store.dispatch(push('/signin'))下面代码中的行导致了这个问题。如果我改为.map(() => ({ type: 'NOT_EXIST' }));，就不会有问题。

什么可能导致这种情况？谢谢

动作/auth.action.js

export const signOutSucceedEpic = (action$, store) =>
  action$
    .ofType(SIGN_OUT_SUCCEED)
    .map(() => store.dispatch(push('/signin')));  // <- this line causes the issue

动作/ index.js

import { combineEpics } from 'redux-observable';

export default combineEpics(
  // ...
  signOutSucceedEpic
);

索引.js

import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import rootEpic from …

TypeScript 2.6引入strictFunctionTypes，升级后，我似乎无法让 Redux 和 React Router 相互配合。因此，我想知道如何最好地定义一个组件的类型，该组件既要显示在某个路线上，又要从 Redux 接收道具。

以下是关于我如何设置我的应用程序。有这样一条路线：

<Route path="/some/path/with/:parameter" component={ConnectedComponent}/>

然后我想要显示的组件从 Redux 和 React Router 接收 props，我试图在以下类型签名中捕获它们：

class BareComponent extends React.Component<ReduxProps & RouteProps, ArbitraryState>

...其中 Redux 道具的定义类似于以下内容：

interface StateProps { storeProperty: string; }
interface DispatchProps { dispatchCallback: () => void; }
type ReduxProps = StateProps & DispatchProps;

...和路由器道具有点像以下：

interface RouteParams { parameter: string }
type RouteProps = RouteComponentProps<RouteParams>;

（RouteComponentProps从哪里进口react-router-dom）

传递给路由器的组件（通过Route上面第一个代码示例中的）创建如下：

const ConnectedComponent = connect<StateProps, DispatchProps, RouteProps, ArbitraryStateInterface>(mapStateToProps)(BareComponent);

不幸的是，使用 …

当我从 /home 导航到 /dashboard 时，路由器工作正常，但是当我从 /home 导航到 /profile:id 时，路由器将我导航到也工作正常的配置文件页面，但是当我刷新它时，它会变成空白页面并且没有给我任何 404 或重定向回主页，我正在使用

react-router: "^4.2.0", react-router-dom: "^4.2.2", react-router-redux: "5.0.0-alpha.6",

那么，如何摆脱空白页面，如果 url 位于 /profile/5，然后在刷新页面上导航回主页或任何适当的内容，请帮忙？

索引.js

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path="/" component={App} />
            <Route component={Page404} />
        </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-site')
);

应用程序.js

<Switch>
    <Route path={`/login`} component={LoginMember} />
    <Route path={`/registermember`} component={SignUp} />
    <Authentication component={AuthenticateRoute} />
    <Route component={Page404} />
</Switch>

const AuthenticateRoute = ({ match }) => (
 <Switch>
    <Authentication path={`${match.url}`} component={MainApp} />
    <Route component={Page404} />
 </Switch>
);

主应用程序

<Switch>                
    <Route path={`/home`} component={Home} …

我对如何从根执行（多个）可选路径参数有点困惑。我正在使用react-router 3和redux 4.3。

据我了解，(/:param1)(/:param2)应该可以工作，但加载应用程序时出现以下错误：

[react-router] 位置“/property/3633”与任何路由不匹配。

索引.js：

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { Router, browserHistory, Route } from 'react-router';

import { syncHistoryWithStore } from 'react-router-redux';

import configureStore from './store/configureStore';

import {MyContainer} from "./containers/MyContainer";

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/(/:Type)(/:Id)" component={MyContainer}/>
        </Router>
    </Provider>,
    document.getElementById('root'),
);

仅供参考我已经尝试过：

path="(/:Type)(/:Id)" 
path="(/:Type)/(/:Id)" 
path="/(/:Type)/(/:Id)" 
path="/(/:Type)(/:Id)" 
path="/:Type/:Id" // Only works when params are …