React Router的安裝及基本使用方式如下。
React Router讓React應用程式能輕易地透過url路徑選擇要導向並渲染的組件。
參考「React 使用Create React App建立React應用程式」建立一個React應用。
開啟命令列輸入npm install react-router-dom
安裝React Router函式庫到本機。
$ npm install react-router-dom
開啟React應用專案目錄的App.js
貼上下面內容。
App.js
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
<Switch>
尋找其中的<Route>
把第一個符合path的內容渲染到畫面。
瀏覽器開啟http://localhost:3000
的效果如下。注意url和顯示的頁面變化。
沒有留言:
張貼留言