Question

我正在尝试捕获前端客户端中的所有未定义路由。前端是纯 Javascript 。我已经使用 Class 定义了组件（HTML文档）对象。

class SignIn {
   render() {
     return (
       `<div class="form-group">
            <label for="email">Email</label>
            <input id="email" type="email" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
        <div class="form-group">
            <input type="button" value="Signin">
        </div>`
     )
   }
}

渲染对象是：

Route({ render: Signin, exact: true, path: '/signin' });
// default route
Route({ render: PageNotFound, path: '/*' });

它可以在没有 pageNotFound路由的情况下工作，但是捕获未定义的路由会导致所有已定义的路由消失并默认路由 >响应所有路线。

这是路由对象

   const rootDocument = document.querySelector('#root');

   export function Route(props) {
    const { render, path, exact } = props;
    const component = new render();
    if (exact && path !== '/*') {
      if (path === url.pathname) {
        rootDocument.innerHTML = component.render();
      }
    } else {
      rootDocument.innerHTML = component.render();
    }
  }

注意：这是一个反应概念，但不是React 。

Answer 1

这实际上解决了问题，但我认为应该有一种优雅的方法。

    const rootDocument = document.querySelector('#root');
    const isContent = document.querySelector('#root');
    const url = location;
    const Router_url = {};

    export function Route(props) {
      const { path, exact } = props;
      Router_url[path] = { render: props.render }; // add to path object
      Object.keys(Router_url).find((el) => {
        if (el === url.pathname && exact && el !== '/*') {
          const { render } = Router_url[el];
          const component = new render();
          rootDocument.innerHTML = component.render();
        } else if (el === '/*' && isContent.children.length === 0) {
          const { render } = Router_url['/*'];
          const component = new render();
          setTimeout(() => {
            rootDocument.innerHTML = component.render();
          }, 500);
        }
      });
    }

如何在前端客户端捕获未定义的路由？

1 个答案: