相关疑难解决方法(0)

在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.

在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.props.addProduct(props).当服务器返回成功时,用户将进入购物车页面.

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

如何从React Router v4的功能重定向到Cart页面？

令人难以置信的是,关于React的每个库的文档有多糟糕.

我正在尝试使用react-router(版本^ 1.0.3)进行简单重定向到另一个视图,我只是累了.

import React from 'react';
import {Router, Route, Link, RouteHandler} from 'react-router';


class HomeSection extends React.Component {

  static contextTypes = {
    router: PropTypes.func.isRequired
  };

  constructor(props, context) {
    super(props, context);
  }

  handleClick = () => {
    console.log('HERE!', this.contextTypes);
    // this.context.location.transitionTo('login');
  };

  render() {
    return (
      <Grid>
        <Row className="text-center">          
          <Col md={12} xs={12}>
            <div className="input-group">
              <span className="input-group-btn">
                <button onClick={this.handleClick} type="button">
                </button>
              </span>
            </div>
          </Col>
        </Row>
      </Grid>
    );
  }
};

HomeSection.contextTypes = {
  location() {
    React.PropTypes.func.isRequired
  }
}

export default …

使用react+ react-router-dom：

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

并通过以下方式保护路线：

路由器

const Router = () => {
    return (
        <Switch>
            <PrivateRoute exact path='/Panel' component={Panel}></PrivateRoute>
            <Route exact path='/Register' component={Register}></Route>
            <Route exact path='/Login' component={Login}></Route>
        </Switch>
    );
};

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

认证

const Auth = …

I am currently building a react native app and am using a stack navigator to navigate between the screens in my app. In my App.js, I am currently storing the screens in this format:

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="screen1">
          <Stack.Screen name="screen1" component={Screen1}></Stack.Screen>
          <Stack.Screen name="screen2" component={Screen2}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

After the user is in screen 1, I want to be able to navigate to screen 2 on the press of a …

在 React SPA 中，我在 /src/pages/ 文件夹下有一组“页面”。

入口点页面是/src/文件夹下的一个index.js文件，我在这里定义了一个路由器const是这样的：

const routing = (
  <Router>
    <div>
      <Switch>
        <Route path="/signIn" component={SignIn} />
        <Route exact path="/" component={Homepage} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route path="/page3" component={Page3} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>

它工作得很好。所有页面都可以像“ https://mysuperapp.com/page2 ”一样导航，它将呈现 Page2 React 组件。

当我合并用户会话管理（登录、注销）时会出现问题。如果用户未登录应用程序，则所有页面都应自动重定向到 /signIn页面。反之亦然，如果用户已经登录，如果访问/signIn页面，它应该自动重定向到根主页。

现在，我已经通过添加以下代码来实现这一切的页面，右边的渲染（）方法在组件声明后，像这样的：

class Page2 extends React.Component {
  render() {
    if (UserProfile.getUserSessionStatus() !== "logged") {
      this.props.history.push("/signIn");
    } …