开发者社区开发与运维文章正文

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

2022-06-14 126

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 好客租房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;