快速建立react路由,瞭解一些react路由配置
阿新 • • 發佈:2019-01-23
你來百度搜索這個問題就說明你就沒好好的看人家提供的README.md檔案
這上面說的很清楚,如何安裝、如何使用,刪除src/App.js,開啟這個連結複製貼貼就OK了,我們來掩飾一遍
1.執行 npm install --save react-router-dom 或者 yarn add react-router-dom 根據自己的實際情況選擇
2.然後找到src/App.js 刪除掉裡面所有的 ,複製我下面的程式碼
import React from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; const BasicExample = () => ( <Router> //這裡是靜態樣式 <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/topics">Topics</Link> </li> </ul> <hr /> //這裡是配飾路由的地方(核心) <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/topics" component={Topics} /> </div> </Router> ); //子元件 Home const Home = () => ( <div> <h2>Home</h2> </div> ); //子元件 About const About = () => ( <div> <h2>About</h2> </div> ); // 子元件 Topics const Topics = ({ match }) => ( <div> <h2>Topics</h2> <ul> <li> <Link to={`${match.url}/rendering`}>Rendering with React</Link> </li> <li> <Link to={`${match.url}/components`}>Components</Link> </li> <li> <Link to={`${match.url}/props-v-state`}>Props v. State</Link> </li> </ul> <Route path={`${match.path}/:topicId`} component={Topic} /> <Route exact path={match.path} render={() => <h3>Please select a topic.</h3>} /> </div> ); const Topic = ({ match }) => ( <div> <h3>{match.params.topicId}</h3> </div> ); export default BasicExample;
刪掉我的註釋,直接暴力複製貼貼,怎麼樣解決了嗎