react router页面跳转二次确认弹窗及样式、业务逻辑自定义

boyanx3个月前 (09-17)技术教程10

我们在编辑页面时如果需要跳走通常会需要给用户提示，react router本身已经给了我们这样的功能，我们先看看怎么使用。

初见二次确认弹窗

// App.jsx
const App = () {
    return (
      <BrowserRouter>
        <div>
          <ul style={{marginTop: '10px'}}>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/write'>Write</Link>
            </li>
          </ul>
          <Switch>
            <Route exact path='/'>
            </Route>
            <Route path='/write' strict={true} forceRefresh={true} component={WriteMail}>
            </Route>
          </Switch>
        </div>
      </BrowserRouter>
      );
}
export default App;

在WriteMail组件里面我们加上Prompt组件并且设置when我嫩就会有二次确认弹窗了，也就是从/write页面跳转时会需要进行确认

// WriteMail.jsx
const WriteMail = () => {
    function redirectMsg(location, type) {
      return type + ': Go to ' + location.pathname;
    }

    return (
        <div>
          <h1>Write</h1>
          <Prompt when={true} message={(a) => redirectMsg(a,  '外层')}/>
        </div>
    );
};
export default WriteMail;

效果如下

自定义二次确认弹窗

功能是有了，但是界面也太丑了吧。不用担心，react router当然支持自定义二次弹窗啊。

我们的二次确认弹窗其实通过给BrowserRouter（或者HashRouter）组件设置属性来自定义的，它默认的就是window.confirm

官方是这么说的

<browserrouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

所以我们需要修改下App.jsx了，我们这里引入antd的Modal做弹窗

// App.jsx
const App = () {
    const getUserConfirmation = (message, callback) => {
        Modal.confirm({
          title: message,
          onCancel: () => {
            callback(false);
          },
          onOk: () => {
            callback(true);
          }
        });
    }
    return (
      </browserrouter><browserrouter>
        <div>
          <ul style={{marginTop: '10px'}}>
            <li>
              <link to='/'/>Home
            </li>
            <li>
              <link to='/write'/>Write
            </li>
          </ul>
          <switch>
            <route exact path='/'>
            </route>
            <route path='/write' strict={true} forceRefresh={true} component={WriteMail}>
            </route>
          </switch>
        </div>
      </browserrouter>
      );
}
export default App;

是不是很完美？

进阶

这个getUserConfirmation属性是在BrowserRouter组件上的，一般我们的项目可能只在组件树的外层才会有一层BrowserRouter，而业务组件一般是在其里面的Route组件的里面，即

<browserrouter getUserConfirmation={getUserConfirmation}>
     <switch>
         <route>
            <writemail></writemail>
         </route>
     </switch>
</browserrouter>

如果我们需要在getUserConfirmation里面出来当前WriteMail相应的业务逻辑怎么弄？（比如弹窗提示文案是“您即将跳转，是否需要保存草稿？”，我们需要执行WriteMail里面的保存草稿逻辑。）

我们很容易想到，如果能将Router组件，放到WriteMail里面就好了，那样我们就能将getUserConfirmation写在WriteMail，执行对应的逻辑就很容易了。

我们尝试下在WriteMail加一层BrowserRouter，同时需要将业务逻辑（编辑组件）放置于内层的Route下，即多了一层路由

// WriteMail.jsx
function WriteMail(props) {
  const [value, setValue] = useState('');

  const getUserConfirmationInWrite = (message, callback) => {
    Modal.confirm({
      title: message,
      onCancel: () => {
        callback(false);
      },
      onOk: () => {
        callback(true);
      }
    });
  }

  return (
    <div>
      <h1>Write</h1>
      <prompt when={true} message={(a) => redirectMsg(a,  '外层')}/>

      <ul style={{marginTop: '10px'}}>
        <li>
          <link to='/write/first'/>First
        </li>
        <li>
          <link to='/write/second'/>Second
        </li>
      </ul>

      <router getUserConfirmation={getUserConfirmationInWrite}>
        <route path='/write/first'>
          <h3>first</h3>
          <prompt when={true} message={(a) => redirectMsg(a, '内层')}/>
          <button>count: {count}</button>
          <input type='text' placeholder='write' value={value} onChange={(e) =/> setValue(e.target.value)}/>
        </prompt></route>
        <route path='/write/second'>
          <h3>second</h3>
        </route>
      </router>
    </prompt></div>
  )
}

现在我们有两层路由了，我们可以设置成不同的getUserConfirmation ，App.jsx用默认的。完整的代码如下

// App.jsx
const App = () {
    return (
      <browserrouter>
        <div>
          <ul style={{marginTop: '10px'}}>
            <li>
              <link to='/'/>Home
            </li>
            <li>
              <link to='/write'/>Write
            </li>
          </ul>
          <switch>
            <route exact path='/'>
            </route>
            <route path='/write' strict={true} forceRefresh={true} component={WriteMail}>
            </route>
          </switch>
        </div>
      </browserrouter>
      );
}
export default App;

// WriteMail.jsx
function WriteMail(props) {
  const [value, setValue] = useState('');
  const [count, setCount] = useState(0);

  const getUserConfirmationInWrite = (message, callback) => {
    console.log('getUserConfirmationInWrite -> ', );
    Modal.confirm({
      title: message,
      onCancel: () => {
        setCount(count => count - 1);
        callback(false);
      },
      onOk: () => {
        setCount(count + 1);
        callback(true);
      }
    });
  }

  return (
    <div>
      <h1>Write</h1>
      <Prompt when={true} message={(a) => redirectMsg(a,  '外层')}/>

      <ul style={{marginTop: '10px'}}>
        <li>
          <Link to='/write/first'>First</Link>
        </li>
        <li>
          <Link to='/write/second'>Second</Link>
        </li>
      </ul>
      <dialog ref={dialogRef}>dialog的内容</dialog>

      <Router getUserConfirmation={getUserConfirmationInWrite}>
        <Route path='/write/first'>
          <h3>first</h3>
          <Prompt when={true} message={(a) => redirectMsg(a, '内层')}/>
          <button>count: {count}</button>
          <input type='text' placeholder='write' value={value} onChange={(e) => setValue(e.target.value)}/>
        </Route>
        <Route path='/write/second'>
          <h3>second</h3>
        </Route>
      </Router>
    </div>
  )
}
export default WriteMail;

现在我们在WriteMail里面的getUserConfirmationInWrite就可以写组件内的业务逻辑（setCount）了。

上面的代码里面我们有两个Prompt，分别表示从/write开头的路径和/write/first路径跳转时会进行二次确认。实测发现：