Question

在React Router v4 doc中，我读过有关提示阻止离开页面的信息： Prompt to prevent to leave，但到目前为止，我还没有找到任何关于阻止在旧版本中访问willtransitionto的内容。

任何建议？

Answer 1

前一段时间一直在研究这个问题，所以，这里有我带来的例子（我不确定这是不是最好的方式，也许有更好的灵魂，但我还想分享）：

1）当您阻止访问并知道必须将用户重定向到哪个页面时：

假设您有Home页面和About页面，并且您希望在用户尝试访问该页面时询问用户的安全情况。

因此，在这种情况下，我们可以将此逻辑放在<Route>组件中的render属性中，就像这样

render={(props)=>{
          if(confirm('Are you sure you want to see this page?')){
            return <About />
          } else {
            return <Redirect to='/'/>
          }
        }
      }

因此，如果用户点击OK它会显示About页面，否则会将用户重定向到Homepage

class App extends React.Component{
  render(){
    return(
    <Router>
      <div className="container">
        <ul>
         <li><Link to="/">Home</Link></li>
         <li><Link to="/about">About</Link></li>
       </ul>
      <hr/>
      <Route exact path="/" component={Home} /> 
      <Route path="/about" render={(props)=>{
              if(confirm('Are you sure you want to see this page?')){
                return <About />
              } else {
                return <Redirect to='/'/>
              }
            }
          }/>
     </div>
    </Router>
    )
  }
}

完整示例是here

2）与第一个示例相同，但如果您想要将用户重定向到尝试访问About页的用户的同一页面。

在这种情况下，为了确保App组件获取位置信息，我将其包装起来：

<Router>
    <Route path="/" render={
           (props)=>{
               return <App {...props}/>
           }
    } /> 
</Router>

然后在这里，在主要的应用程序组件（App）中，我们可以像这样跟踪路径（因此，每当App从ReactRouter组件获取有关位置和内容的新属性时，我们可以检查并保存在我们的state）中：

  constructor(props){
        super(props);

        this.state={
            prevPath: props.location.pathname
        }
    }

   componentWillReceiveProps(nextProps) {
        if (nextProps.location !== this.props.location) {
          this.setState({ prevPath: this.props.location.pathname })
        }
    }

然后，如果用户想要访问about页面，我们可以，如果用户没有确认重定向，请将他带回上一页，因此，render属性将如下所示：

 <Route path="/about" render={(props)=>{
                if(confirm('Are you sure you want to see this page?')){
                  return <About />
                } else {
                  let toPath = '/';
                  if(this.state.prevPath){
                    toPath=this.state.prevPath
                  }

                  return <Redirect to={toPath}/>
                }
              }
            }/>

完整示例here

反应路由器v4阻止访问页面

1 个答案: