美文网首页
init路由react-router

init路由react-router

作者: 东方三篇 | 来源:发表于2020-03-31 13:58 被阅读0次

初始化路由ts项目必须引入两个

  # 两个都要安装
  yarn add @types/react-router-dom
  yarn add react-router-dom

用创建登录 login 和 Menu 页面为例来演示

1.在pages目录下新建 login 文件夹再建 login.tsx. pages/login/login.tsx
2.在pages目录下新建 menu 文件夹再建 menu.tsx. pages/menu/menu.tsx
3.在 components 目录下新建 Login文件夹再建 index.tsx. components/Login/index.tsx
4.在 pages/login/login.tsx 引入 components/Login/index.tsx 的文件。
3.App.tsx文件修改

import React, { Component } from 'react'

# 虽然要安装 *@types/react-router-dom* 和 *react-router-dom* 但是这里只需引入 *react-router-dom*
import {BrowserRouter, Switch, Route} from 'react-router-dom'

import Login from './pages/login/login'
import Menu from './pages/menu/menu'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path='/login' component={Login}/>
          <Route path='/' component={Menu}/>
        </Switch>
      </BrowserRouter>
    )
  }
}
export default App

相关文章

网友评论

      本文标题:init路由react-router

      本文链接:https://www.haomeiwen.com/subject/iyjwuhtx.html