react-router-dom学习心得1.0

xiaoxiao2021-02-28  5

通过 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"));
转载请注明原文地址: https://www.6miu.com/read-2250076.html

最新回复(0)