React 路由入門

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

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

首先,安裝 react-router-dom:

npm install react-router-domyarn 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 時應呈現的元件。

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