How do you create a multi-page application using React?

Question

I have just started using React and have created a new project using create-react-app. I have made a homepage which works. However, I want to add another page to this application. I have a button on the homepage which I want to redirect to another page when clicked. Can someone please give a simple explanation to do this?

I do know that there are other questions that ask this, but they don't seem to apply to create-react-app, or I don't understand them since I am just starting out with React.

Here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render((
    <Router>
        <Route path = "/" component = {App} />
    </Router>
), document.getElementById('root'));
registerServiceWorker();

Jude Niroshan · Accepted Answer · 2017-08-11 05:47:20Z

2

You need to use react-router-dom library. Navigation between pages is really easy in react.

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory, BrowserRouter} from 'react-router-dom'

render((
         <BrowserRouter basename="/" history={hashHistory}>
           {routes()}
         </BrowserRouter>
       ), document.getElementById('app'));

Then in your home page, you can have something similar to below page:

import React, { Component } from 'react';
import { Switch, Route, BrowserRouter, hashHistory } from 'react-router-dom';
import './MainLayout.css';
import ReportNavComponent from './ReportNavComponent';
import ListOfUsers from '../reports/ListOfUsers/ListOfUsers';
import ListOfProviders from '../reports/ListOfProviders/ListOfProviders';
import ListOfDiagnosis from '../reports/ListOfDiagnosis/ListOfDiagnosis';
import ListOfNewPatients from '../reports/ListOfNewPatients/ListOfNewPatients';
import NumberOfAdmissions from '../reports/NumberOfAdmissions/NumberOfAdmissions';

...

<div className="reportContent">
                        <Switch>
                            <Route path="/ListOfUsers" component={ListOfUsers} />
                            <Route path="/ListOfProviders" component={ListOfProviders} />
                            <Route path="/ListOfDiagnosis" component={ListOfDiagnosis} />
                            <Route path="/ListOfNewPatients" component={ListOfNewPatients} />
                            <Route path="/NumberOfAdmissions" component={NumberOfAdmissions} />
                            <Route component={ListOfUsers} />
                        </Switch>
</div>

answered Aug 11, 2017 at 5:47

Jude Niroshan

4,4809 gold badges43 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

u8y7541 Over a year ago

Thanks! It worked! However, it works when I don't import hashHistory and provide it to BrowserRouter. Apparently, hashHistory is not in react-router-dom... Am I using the wrong version?

u8y7541 Over a year ago

When I try to navigate from one page to another, the url changes, but the page doesn't change... what am I doing wrong?

Atty · Accepted Answer · 2017-08-11 06:10:11Z

1

reacter-router-dom is the way to go about routing. But if you have just started with react, why don't start with a boiler-plate project and see how the components and other entities interact?

You should definitely look at davezuko's react-redux starter kit and experiment with it.

answered Aug 11, 2017 at 6:10

Atty

8111 gold badge15 silver badges21 bronze badges

1 Comment

Dan DiGangi Over a year ago

Ruta3 is another routing lib I use alternatively.

Collectives™ on Stack Overflow

How do you create a multi-page application using React?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related