react-router-dom学习心得1.0

最新推荐文章于 2024-10-22 10:59:43 发布

不科学的年轻人

最新推荐文章于 2024-10-22 10:59:43 发布

阅读量214

点赞数

分类专栏： react 文章标签： react react-router-dom

本文链接：https://blog.csdn.net/qq_27329021/article/details/79805733

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过 react-router-dom 实现路由的简单例子

官网文档 https://reacttraining.com/react-router/web/example/basic

index.js

import React,{Component} from "react";
import {render} from "react-dom";
import {BrowserRouter,Route,Link,Switch,Redirect} from "react-router-dom";

function Home(){
    return (
        <p>this is home</p>
    )
}
function About(){
    return (
        <p>this is About</p>
    )
}
function Topic(){
    return (
        <p>this is Topic</p>
    )
}


class App extends Component{

    render(){
        return (
            <BrowserRouter>
                <div>
                    <ul>
                        <li><Link to="/home">HOME</Link></li>
                        <li><Link to="/about">ABOUT</Link></li>
                        <li><Link to="/topic">TOPIC</Link></li>
                    </ul>

                    {/*定义了页面一打开，去到哪个路由里*/}
                    <Redirect to="/about"></Redirect>

                    {/*exact 属性 精确匹配 只匹配"/" ,
                    而不会把"/home"，"/about"，"/topic"都匹配上*/}
                    <Switch>{/*Switch标签 只匹配单个路由*/}
                        <Route path="/" component={Home} exact></Route>
                        <Route path="/home" component={Home}></Route>
                        <Route path="/about" component={About}></Route>
                        <Route path="/topic" component={Topic}></Route>
                    </Switch>

                </div>

            </BrowserRouter>

        )
    }
}

render(<App />,document.getElementById("root"));