React 路由器:我不希望用户通过输入 url 直接导航到页面，但允许仅使用应用程序内的链接访问页面.

问题描述

我的 Routes.js

My Routes.js

<Route path="/game-center" component={GameCenter} />
      <Route path="/game-center/pickAndWin" component={PickAndWin} />
      <Route path="/game-center/memory" component={Memory} />
      <Route path="/game-center/summary" component={GameSummary} />
    </Route>
  </Router>

在卡上点击我将他路由到游戏或摘要，具体取决于游戏是实时还是过期.

On Card Click i'm routing him to the game or summary depending whther game is live or expired.

cardClick=(type, name, status, gameId) => {
    console.log(`here${type}${status}`, name);
    this.props.dispatch(GameCenterActions.setShowGame());
    if (status === LIVE) {
      this.props.dispatch(GameCenterActions.selectGame({ type, name, status, gameId }));
      this.props.dispatch(GameCenterActions.resetShowSummary());
      hashHistory.push(LIVE_GAMES[type]);
    } else if (status === EXPIRED) {
      this.props.dispatch(GameCenterActions.setShowSummary());
      console.log(`${EXPIRED_GAMES}summary page here`);
      this.props.dispatch(GameCenterActions.selectGame({ type, name, status, gameId }));
      hashHistory.push('/game-center/summary');
    }
  }

当用户直接输入 url '/game-center/summary' 时，他不应该被允许并且应该被发送回主页.这在反应路由器本身中可能吗?我想在我的整个应用程序中实现这一点.我不希望用户通过输入 url 直接导航到页面，而是只使用应用内的链接访问页面.

When user directly types url '/game-center/summary' he should not be allowed and should be sent back to home page. Is this possible in react router itself? I want to implement this in my entire app. I don't want user to directly navigate to pages by typing urls but going to pages only using links inside the app.

推荐答案

您可以通过使用高阶组件来做到这一点.例如你可以在用户通过身份验证时设置一个标志，然后将此 HOC 与 react router 中的指定组件附加

You can do this by using Higher Order Components.Such as you can set a flag when user is authenticated and then attach this HOC with the specified component in react router

import React,{Component} from 'react';
import {connect} from 'react-redux';
export default function(ComposedComponent){
  class Authentication extends Component{
    static contextTypes = {
      router : React.PropTypes.object
    }
    componentWillMount(){
      if(!this.props.user){
        this.context.router.push('/');
      }
    }
    componentWillUpdate(nextProps){
      if(!nextProps.user){
          this.context.router.push('/');
      }
    }
    render(){
      return(<ComposedComponent {...this.props}/>);
    }
  } 
}

然后在你的路线中

  <Route path="home" component={requireAuth(Home)}></Route>

这篇关于React 路由器:我不希望用户通过输入 url 直接导航到页面，但允许仅使用应用程序内的链接访问页面.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！