In this project, we will create a very basic React application from scratch that makes use of multiple routes. We will be using the react-router-dom
package, specifically v4. You can find more documentation to read on your own time here: Click Me!
Fork
andclone
this repository.cd
into the project.- Run
create-react-app ./
to get a React boilerplate.- Delete
README.md
and renameREADME.old.md
back toREADME.md
.
- Delete
In this step, we will create three basic components that will be used later for three separate routes.
- Open
src/
. - Create a
Route1.js
,Route2.js
, andRoute3.js
. - All three
Route#.js
files should be very basic state-less components.
src/Route1.js
import React from 'react';
export default function Route1() {
return (
<div>
Route 1 here!
</div>
)
}
src/Route2.js
import React from 'react';
export default function Route2() {
return (
<div>
Route 2 here!
</div>
)
}
src/Route3.js
import React from 'react';
export default function Route3() {
return (
<div>
Route 3 here!
</div>
)
}
In this step, we will add the react-router-dom
package to our React project.
- Run
npm install --save react-router-dom
.
In this step, we will configure routes using a routes.js
file.
- Create a new
src/routes.js
file. - Open
src/routes.js
. - Import
React
fromreact
. - Import
{ Switch, Route }
fromreact-router-dom
. - Import the three
src/Route#.js
components. - Export by default a
<Switch></Switch>
component. - Add three
<Route/>
components for eachsrc/Route#.js
component inside the exported<Switch></Switch>
component.
src/routes.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
// Components
import Route1 from './Route1';
import Route2 from './Route2';
import Route3 from './Route3';
export default (
<Switch>
<Route exact path="/" component={ Route1 } />
<Route path="/2" component={ Route2 } />
<Route path="/3" component={ Route3 } />
</Switch>
)
In this step, we'll render the routes
inside the main src/App.js
component.
- Open
src/App.js
. - Import the
src/routes.js
file. - Underneath the
<p></p>
element use{}
to break out of JSX and render the imported router.
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import routes from './routes';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
{ routes }
</div>
);
}
}
export default App;
In this step, we'll configure our React application to handle routing.
- Open
src/index.js
. - Import
HashRouter
fromreact-router-dom
. - In the
ReactDOM.render
statement, wrap the<App />
component in a<HashRouter></HashRouter>
component.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// Routing
import { HashRouter } from 'react-router-dom';
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>
, document.getElementById('root'));
registerServiceWorker();
In this step, we'll provide a way for a user to navigate between the routes. Using react-router-dom
, this is done by using the <Link></Link>
component.
- Open
src/App.js
. - Import
Link
fromreact-router-dom
. - Above the rendering of the routes, add three
<Link>
components that route to the three different paths configured insrc/routes.js
.
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import routes from './routes';
import { Link } from 'react-router-dom';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Link to="/">
<p>Route 1</p>
</Link>
<Link to="/2">
<p>Route 2</p>
</Link>
<Link to="/3">
<p>Route 3</p>
</Link>
{ routes }
</div>
);
}
}
export default App;
If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.
© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.