初始化路由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
网友评论