React router：我不希望用户通过键入 url 直接导航到页面，但只允许使用应用程序内的链接转到页面。

Question

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>

在卡片点击上，我会将他路由到游戏或摘要，具体取决于游戏是在线还是过期。

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');
}
}

当用户直接输入网址"/game-center/summary"时，他不应该被允许，应该被发送回主页。 这在反应路由器本身中可能吗？我想在我的整个应用程序中实现这一点。 我不希望用户通过键入 url 直接导航到页面，而是仅使用应用程序内的链接转到页面。

Answer 1

您可以使用高阶组件来执行此操作。 例如，您可以在用户进行身份验证时设置一个标志，然后将此 HOC 与 react 路由器中的指定组件附加

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>