React 路由的基本使用

我们坚持写笔记, 因为只要笔记不停,就代表我们还没有放弃

import React, { Component } from "react"

import { Link, Route, BrowserRouter } from "react-router-dom"
import UserPager from "./UserPager"
import HomePager from "./HomePage"
// 默认导出就行了
export default class ReactRouter extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <BrowserRouter>
                    <nav>
                        <Link to="/" >home</Link> &nbsp;&nbsp;
                        <Link to="/user" >user</Link>
                    </nav>

                    <Route exact path="/" component={HomePager}></Route>
                    <Route path="/user" component={UserPager}></Route>
                </BrowserRouter>

            </div>

        );
    }
}

展示效果:

行,就是这么简单:

猜你喜欢

转载自blog.csdn.net/qq_15009739/article/details/107296854