标签: react-router-redux

如果您有以下路线:

<Route path="/users/:userId" />

然后您导出该路线,因此可以在您的应用中使用,例如:

export const MY_ROUTE = '/users/:userId/';

<Route path={MY_ROUTE} />

如何动态设置链接中的参数？即我想这样做:

<Link to={MY_ROUTE} params={{userId: 1}} />

但是params完全被忽略了...而查询只是一个查询(？userId =)而不是一个参数...任何想法？

我打算用调用API redux:我用axios,history,react-redux,react-router-native,react-router,, redux-promise-middleware,redux-thunk组件使用使API调用redux:我做了Reducers文件夹,并把我所有的减速机文件中有自己的文件,并在主文件中像这样,这是他们结合我的generateoptReducer.js文件:

const initialState = {
    data: {},
    error: null,
    status: null
};
import {generateOTP} from '../Actions/api';
export default function reducer(state = initialState, action) {

    switch (action.type) {
        case (action.type === 'GENERATEOTP_PENDING' || {}).input:
            // Action is pending (request is in progress)
            return {...state, status: 'fetching',methodes:'done1'};
        case (action.type === 'GENERATEOTP_FULFILLED' || {}).input:
            // Action is fulfilled (request is successful/promise …

我试图遵循这个反应路由器redux所以我可以使用我的组件或操作中的推送('/')重定向.

教程:https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

我不知道我错过了什么,但我收到了一个错误.

我在chrome控制台中遇到的错误是:

bundle.js:3090警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.

检查渲染方法Root.在Root printWarning @ bundle.js:3090

bundle.js:2684未捕获错误:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.

bundle.js:20893组件中出现上述错误:在Root中的Provider(由Root创建)中

index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { routerReducer, routerMiddleware, push } from 'react-router-redux'
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';

import reducers from './reducers';
import Root from './root';

// Create a history of your choosing (we're using a browser history in this case)
const history = …

我有一个由react-router(path ="profile /:username")加载的Profile组件,组件本身如下所示:

...
import { fetchUser } from '../actions/user';

class Profile extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const { username } = this.props;
    this.fetchUser(username);
  }
  componentWillReceiveProps(nextProps) {
    const { username } = nextProps.params;
    this.fetchUser(username);
  }
  fetchUser(username) {
    const { dispatch } = this.props;
    dispatch(fetchUser(username));
  }
  render() {...}
}

export default connect((state, ownProps) => {
  return {
    username: ownProps.params.username,
    isAuthenticated: state.auth.isAuthenticated
  };
})(Profile);

而fetchUser动作看起来像这样(redux-api-middleware):

function fetchUser(id) {
  let token = localStorage.getItem('jwt');
  return {
    [CALL_API]: {
      endpoint: `http://localhost:3000/api/users/${id}`, …

与Redux连接后,示例https://reacttraining.com/react-router/web/example/auth-workflow中的 PrivateRoute无效.

我的PrivateRoute看起来与原始版本几乎相同,但只连接到Redux并在原始示例中使用它而不是fakeAuth.

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
   {...rest}
   render={props =>
   auth.isAuthenticated
    ? <Component {...props} />
    : <Redirect to={{ pathname: "/login" }} />}
  />
);

 PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.func.isRequired
 }

 const mapStateToProps = (state, ownProps) => {
  return {
     auth: state.auth
  }
};

export default connect(mapStateToProps)(PrivateRoute);

用法和结果: -

1. 不工作,但希望和期望工作
   • <PrivateRoute path="/member" component={MemberPage} />
2. 工作,但不希望像这样使用
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. 工作.只是工作,但根本不想使用.从这一点可以理解,如果你将原始的PrivateRoute连接到Redux,你需要传递一些额外的道具(任何道具)来使PrivateRoute工作,否则它不起作用.任何人,请对这种行为给出一些暗示.这是我的主要问题
   • <PrivateRoute path="/member" component={MemberPage} …

要确定特定菜单项的样式,我试图获取导航组件中的当前路径.

我已经尝试了一些常见的嫌疑人,但无法得到任何结果.特别是我认为通过React注入的属性不存在.

this.props.location 回报 undefined

this.props.context 回报 undefined

我用react 15,redux 3.5,react-router 2,react-router-redux 4

import React, {Component, PropTypes} from 'react';
import styles from './Navigation.css';
import NavigationItem from './NavigationItem';

class Navigation extends Component {

  constructor(props) {
    super(props);
  }

  getNavigationClasses() {
    let {navigationOpen, showNavigation} = this.props.layout;
    let navigationClasses = navigationOpen ? styles.navigation + ' ' + styles.open : styles.navigation;
    if (showNavigation) {
      navigationClasses = navigationClasses + ' ' + styles.collapsed;
    }
    return navigationClasses;
  }

  render() { …

我已经通过很多的这样的堆栈溢出类似的问题了一个.每个人都有不同的角度来部署反应应用程序.

但是这个问题适用于那些使用redux,react-router和react-router-redux的人.我花了很多时间来确定托管单页面应用程序的正确方法.我正在汇总这里的所有步骤.

我写了下面的答案,其中包含将react-redux app部署到S3的步骤.

我想定义一个可用于注销用户的URL(调度将注销用户的操作).我没有找到显示如何实现路由调度事件的示例.

我一直在争夺这一个!

我想拥有总是有徽标,导航的"主应用程序容器"...我想使用react-bootstrap来完善它.

目前我遇到了问题,我的项目基于davezuko的"react-redux-starter-kit"

我试图把我所有的自举<NavBar>和<LinkContainers>在提供内部根容器.

一切都显示出来并且看起来不错,但我的链接都不起作用,当我放置一个常规的反应路由器时,<Link>我会遇到同样的问题.

我想,嗯,链接在路由调用的视图中工作,所以我在导出default(store)=>之后将所有这些复制到路由中

Babel,eslint和webpack允许这个编译,但是当我运行页面时,没有一个出现,当我看一下react-dev控制台时,这些反应节点甚至都没有出现.

这就是我所拥有的Root.js:

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router } from 'react-router';

import { IndexLink, Link } from 'react-router';

import NavBar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';

export default class Root extends React.Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.element.isRequired,
    store: PropTypes.object.isRequired
  };

  get content () {
    return ( …

我正在尝试将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 。

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