文檔地址：https://reacttraining.com/react-router/web/example/preventing-transitions

大概意思就是說：我在這個頁面上寫東西呢？不小心點到了其他路由上，我們可以做一個提示，來一個彈窗，提示你真的要切換走嗎?然后選擇確定和取消，

關鍵代碼就是

<Promptwhen={isBlocking} // when 值為true時啟用防止轉換message={(location, a,b) => { // 驗證出，這個屬性會傳入2個參數。。。console.log(location) // 是一個對象，內含 hash key pathname search stateconsole.log(a) // PUSH ??不能明白這個字符串是啥console.log(b) // undefind return `Are you sure you want to go to ${location.pathname}`}}/> import React from 'react' import ReactDOM from 'react-dom' import {BrowserRouter as Router,Route,Link,Prompt } from 'react-router-dom'const PreventingTransitionsExample = () => (<Router><div><ul><li><Link to="/">Form</Link></li><li><Link to="/one">One</Link></li><li><Link to="/two">Two</Link></li></ul><Route path="/" exact component={Form}/><Route path="/one" render={() => <h3>One</h3>}/><Route path="/two" render={() => <h3>Two</h3>}/></div></Router> )class Form extends React.Component {state = {isBlocking: false}render() {const { isBlocking } = this.statereturn (<formonSubmit={event => {event.preventDefault()event.target.reset()this.setState({isBlocking: false})}}><Promptwhen={isBlocking}message={location => (`Are you sure you want to go to ${location.pathname}` // ES6的模板字符串)}/><p>Blocking? {isBlocking ? 'Yes, click a link or the back button' : 'Nope'}</p><p><inputsize="50"placeholder="type something to block transitions"onChange={event => {this.setState({isBlocking: event.target.value.length > 0})}}/></p><p><button>Submit to stop blocking</button></p></form>)} } ReactDOM.render(<PreventingTransitionsExample />,document.getElementById("app") )

轉載于:https://www.cnblogs.com/daowangzhizhu-pt/p/6655124.html

總結

以上是生活随笔為你收集整理的React-router4 第五篇 Preventing Transitions 防止转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。