Umijs组件的初次应用

在Umijs组件中我们不像vue那样可以看到组件的路径，在umijs刚刚搭建完成我们看不到组件的路径，所以我们要手动进行一些小小的改动，就可以看到了

一，应用前的准备

1、在当前项目文件路径下的终端输入 npm umi g page login posts/post posts/create命令

会实现在pages文件目录下添加login的相关两个文件，在posts文件目录下添加post和create的相关文件

2.找到umirc.ts,在里边添加routes里也有组件的path和compoment(path就是路由路径，compoment就是指定路由组件）注意，在指定路由组件的时候，路径默认是从pages文件夹下

export default {
  npmClient: 'npm',
  routers:[ {path:'/',component:'./index'},
    {path:'docs',component:'./docs'},
    {path:'/posts/create',component:'./posts/create'},
    {path:'/login',component:'./login'},
    {path:'posts/:postId',component:'./posts/post'}]
};

这样我们就把组件添加到了这个项目中，我们运行发现在界面看不到，这是由于我们主页并没有设置跳转到我们新添加的组件的链接

3.在src目录下找到laytous中的index.tsx就是我们的首页配置，运用Link命令（组件式）进行链接

  <li>
          <Link to='/login'>login</Link>
        </li>

我们的组件就添加好了 

4.我们同样可以使用history的方法来进行页面的跳转，但是需要注意的是，我们如果使用history（命令式）的话，需要先引入history，Link方法其实也需要引入，只是默认已经引入了

import { history } from 'umi';

然后我们就可以使用history的方法了（history.push(),history.back,history.go()）例如用history.push方法实现登陆界面的跳转

import { Link, Outlet } from 'umi';
import { history } from 'umi';
import styles from './index.less';
function login(){
  history.push('/login');
}
export default function Layout() {
  return (
    <div className={styles.navs}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
        <li>
          <button onClick={login}>登录</button>
        </li>
        <li>
          <a href="https://github.com/umijs/umi">Github</a>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}

接下来我们就可以愉快的玩耍Umi里的组件了