React 路由入門

Created: November-22, 2018

這個入門假設你正在使用 create-react-app ，或使用 Babel 和所有好東西的同等工作。

還可以在這裡檢視精彩的文件。

首先，安裝 react-router-dom：

npm install react-router-dom 或 yarn add react-router-dom。

然後，建立一個存在基本 Navbar 的元件，其中包含兩個專案和基本頁面：

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

const Home = () => (
  <div>
    <p>We are now on the HOME page</p>
  </div>
)

const About = () => (
  <div>
    <p>We are now on the ABOUT page</p>
  </div>
)

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr/>
      <Route path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </BrowserRouter>
)
export default App

讓我們一步一步地看看這段程式碼：

import React from 'react'：確保你匯入 React
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'分手：
BrowserRouter 是實際的路由器本身。確保將元件包裝在 BrowserRouter 元件中。
Route 是一個可以導航到的特定路線
Link 是一個生成 <a href="..."> 標籤的元件，你可以將其用作超連結。
const Home 是一個返回主頁的功能。
const About 是一個返回 About 頁面的函式。
const App 是主要組成部分：
<BrowserRouter> 是 JSX 元件，它包裝了你要在其中使用 <Route> 元件的元件。
‘is a single element to wrap all JSX inside theBrowserRouter` in。
<ul> 是 Navbar。它包含指向 Home 的連結和指向 About 的連結。
<li><Link to="/">Home</Link></li> 連結到主頁。你可以看到，由於連結引用“/”，因此空的相對路徑將呈現主頁。
<li><Link to="/about">About</Link></li> 連結到關於頁面。
<Route path="/" component={Home}/> 描述了相對路徑為 / 時應呈現的元件。
<Route path="/about" component={About}/> 描述了相對路徑為 /about 時應呈現的元件。

很多東西要從這裡學習，但希望這能解釋基礎知識，所以從這裡你可以繼續學習。