Basic linking

The idea with links in React apps is that they point to routes that point to components that render new content. The Link component also takes care of the browser history API and looking up route/component mappings. Here's an application component that renders two links:

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

import First from './First';
import Second from './Second';

const App = () => (
<Router>
<section>
<nav>
<p>
<Link to="first">First</Link>
</p>
<p>
<Link to="second">Second</Link>
</p>
</nav>
<section>
<Route path="/first" component={First} />
<Route path="/second" component={Second} />
</section>
</section>
</Router>
);

export default App;

The to property specifies the route to activate when clicked. In this case, the application has two routes—/first and /second. Here is what the rendered links look like:

When you click the first link, the page content changes to look like this:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.125.171