React router:I 不希望用户通过键入 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' 时，他不应该被允许并且应该被送回主页。这可能在反应路由器本身吗？我想在我的整个应用程序中实现它。我不希望用户通过键入 urls 直接导航到页面，而是仅使用应用程序内部的链接转到页面。

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>

React router:I 不希望用户通过键入 url 直接导航到页面，而是允许仅使用应用程序内部的链接转到页面。

React router:I don't want user to directly navigate to pages by typing urls but allow going to pages only using links inside the app.

javascript

url-routing

reactjs

react-router