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

Question

我的 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 我将他引导至游戏或摘要，具体取决于游戏是实时的还是过期的。

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 直接导航到页面，但只使用应用程序内的链接访问页面。

Answer 1

您可以通过使用高阶组件来做到这一点。 比如你可以在用户通过身份验证时设置一个标志，然后将此 HOC 与 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>