Так как будем рассматривать только работу роутера в вэб-приложении, то нам потребуется только react-router-dom, устанавливаем.

npm install --save react-router-dom

Импортируем в приложение три компонента

import { Route, BrowserRouter, Switch} from 'react-router-dom';

Общая структура приложения с шаблоном.

class App extends Component {
  render() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" component={ LayoutComponent } />
            </Switch>
        </BrowserRouter>
    );
  }
}

export default App;

Компонент шаблона будет подключаться при любом path, содержащем "/".

Настраиваем маршруты в шаблоне.

class LayoutComponent extends Component {
    render() {
        return (
            <div>
                <NavComponent/>
                <HeaderComponent/>
                <Switch>
                    <Route exact path="/" component={ MainComponent } />
                    <Route path="/index.html" component={ MainComponent }/>
                    <Route path="/company.html" component={ AboutComponent } />
                </Switch>
                <FooterComponent/>
            </div>
        );
    }
}

export default LayoutComponent;

Параметр exact означает точное совпадение пути.

Как подключить и использовать компонент react-fontawesome библиотеки Font Awesome.

Подробнее...

Паттерн, позволяющий обходить правило одного корневого эелемента в компонентах React.

Подробнее...

Инлайн стили в React передаются в компонент как обычные свойства (props). При этом, так как значение свойства передается в фигурных скобках, а стили передаются в виде объекта, то получается двойная фигурная скобка.

<header className="masthead" style={{ background: "url('img/home-bg.jpg')" }}/>