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 时应呈现的组件。

很多东西要从这里学习，但希望这能解释基础知识，所以从这里你可以继续学习。