React Router Overview

React Router
has gone through some changes over the years. Here’s an intro to the latest version: React Router 4.

Installing React Router

Same as installing any package. You’ll probably want react-router-dom
and not react-router
, though:

$ yarn add react-router-dom

# or with npm:
$ npm install react-router-dom --save

Setting Up Routes

It’s actually pretty intuitive. Just define Routes in the child element of a Router:

import React, { Component } from 'react';
// This example's for browser use, so I'm using `BrowserRouter`.
// The are other routers for other environments, though.
import { BrowserRouter, Route } from 'react-router-dom';

// Your components.
import AboutPage from './AboutPage';
import HomePage from './HomePage';

class App extends Component {
  render() {
    return (
      
        
{/* `component` will render when `path` matches the user's location */} {/* `exact` makes it so it only renders if `path` matches exactly. */} {/* Otherwise, `HomePage` would render on "mysite.com/About" as well as "mysite.com/". */}
); } } export default App;

Linking to Routes

Of course, routes aren’t that useful if the user has to manually edit the URL. React Router offers a solution in the form of the Link
component:

import React from 'react';
import { Link } from 'react-router-dom';

// Our Home Page.  Exciting stuff.
export default function HomePage() {
  return (
    

{'Home Page'}

{/* A link to the About route. */} {'Check out our About Page!'}
); }

If you’re wondering why you shouldn’t just use an anchor tag (
): React Router does some cool stuff with the history object.

Alligator.io稿源:Alligator.io (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合技术 » React Router Overview

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录