通过 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"));