OHIF记录（七）——关于NotFound.js

OHIF记录（七）——关于NotFound.js

NotFound.js是一个路由组件，如果跳转的路由没有定义的话，则会跳转到这个组件对应的路由，组件源码如下：

export default function NotFound({ message = 'Sorry, this page does not exist.', showGoBackButton = true }) {

  const context = useAppContext();

  return (
    <div className={'not-found'}>
      <div>
        <h4>{message}</h4>
        {showGoBackButton && context.appConfig.showStudyList && (
          <h5>
            <Link to={'/'}>Go back to the Study List</Link>
          </h5>
        )}
      </div>
    </div>
  );
}

这是一个函数式组件，传入了一个包含两个参数的数组，message是在错误页面需要显示的文本，showGoBackButton可以理解为一个控制参数，如果用于控制是否在下边一行显示回退按钮的参数，回退的本质按钮是react-router-dom里的Link组件，指向根路由，如果将showGoBackButton置为true，那么就会显示回退按钮，如下图：

上图蓝色的文本点击就会跳转到根路由，如果将showGoBackButton置为false，那么就不会出现那行蓝色的文本，如下图：

并且，只有当context.appConfig.showStudyList和showGoBackButton同时为true时，才可以出现回退按钮，showStudyList在default.js文件(见OHIF记录（六）)进行配置。