好客租房105-配置基础路由

简介: 好客租房105-配置基础路由

步骤:安装路由

1yarn add react-router-dom

2导入路由文件Router/router/link

3在pages文件中创建Home/index。js和cotyList/index。两个页面

4使用Router配置首页和城市选择页面

import React from "react";
import {Button} from "antd-mobile"
import {BrowserRouter as Router,Route,link, Link} from "react-router-dom"
//导入要使用的组件
import Home from "./pages/Home"
import CityList from "./pages/CityList"
function App() {
  return (
      <Router>
 <div className="App">
     {/* 配置路由入口 */}
    <Link to="/home">首页</Link>
    <Link to="/citylist">城市数据</Link>
     {/* 配置路由 */}
    <Route path="/home" component={Home}></Route>
    <Route path="/citylist" component={CityList}></Route>
    </div>
      </Router>
  );
}
export default App;

图片.png

相关文章
好客租房111-tabber配合路由使用
好客租房111-tabber配合路由使用
98 0
好客租房111-tabber配合路由使用
好客租房92-路由的基本使用
好客租房92-路由的基本使用
88 0
好客租房92-路由的基本使用
好客租房108-嵌套路由
好客租房108-嵌套路由
106 0
好客租房108-嵌套路由
好客租房113-首页路由处理
好客租房113-首页路由处理
120 0
好客租房113-首页路由处理
|
PHP 数据库
好客租房102-本地接口部署
好客租房102-本地接口部署
143 0
好客租房102-本地接口部署
好客租房94-路由的执行过程
好客租房94-路由的执行过程
396 0
好客租房94-路由的执行过程
|
前端开发 JavaScript
好客租房71-高阶组件使用步骤
好客租房71-高阶组件使用步骤
116 0
好客租房71-高阶组件使用步骤
好客租房80-组件更新机制
好客租房80-组件更新机制
117 0
好客租房80-组件更新机制
好客租房177-createReact方法封装
好客租房177-createReact方法封装
152 0
好客租房177-createReact方法封装
|
定位技术
好客租房170-地图找房的一个封装流程
好客租房170-地图找房的一个封装流程
76 0
好客租房170-地图找房的一个封装流程