react项目实战 3 配置基础路由

1 安装路由
npm i [email protected]

2 在pages下新建两个文件CityList/index.js和Home/index.js

创建对应的组件

Home/index.js

import React from "react"
export default class Home extends React.Component{
    render(){
        return <div>首页页面</div>
    }

}

 CityList/index.js

import React from "react"
export default class CityList extends React.Component{
    render(){
        return <div>这是城市选择页面</div>
    }

}

3 导入路由 Router、Route、Link
4 使用Route组件配置 首页 和 城市选择页面

App.js

// 导入button组件
import {Button} from "antd"
// 导入路由
import {BrowserRouter as Router, Route, Link} from "react-router-dom"
//导入 首页和城市选择 两个组件
import Home from "./pages/Home/index"
import CityList from "./pages/CityList/index"

function App() {
    return (
        <Router>
            <div className="App">
                {/*项目根组件<Button>登录</Button>*/}
                {/*配置导航菜单*/}
                <ul>
                    <li><Link to="/home">首页</Link></li>
                    <li><Link to="/cityList">城市选择列表</Link></li>
                </ul>

                {/*配置路由*/}
                <Route path="/home" component={Home}></Route>
                <Route path="/cityList" component={CityList}></Route>
            </div>
        </Router>
    );
}

export default App;

效果

点 首页

 点 城市选择列表