> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/react-router/animate-transitions.md).

# Создание роутов

В папку **src** создаем папки **App, Layout, scenes**

Удаляем файлы **src/App.js** и **src/App.css**

В папке **src/scenes** создаем файлы:

{% code title="Home/index.js" %}

```jsx
const Home = () => <h1>Home</h1>

export default Home
```

{% endcode %}

{% code title="About/index.js" %}

```jsx
const About = () => <h1>About</h1>

export default About
```

{% endcode %}

{% code title="Topics/index.js" %}

```jsx
const Topics = () => <h1>Topics</h1>

export default Topics
```

{% endcode %}

#### Добавляем [React Router](https://github.com/ReactTraining/react-router) <a href="#dobavlyaem-react-router" id="dobavlyaem-react-router"></a>

> ```
> yarn add react-router-dom
> ```

В файл **webpack.config.js** добавляем секцию *devServer* с параметром *historyApiFallback: true*

```javascript
module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};
```

Создаем файл**ы:**

{% code title="src/App/Routes.js" %}

```jsx
import { Route, Switch } from 'react-router-dom'

import Home from 'scenes/home'
import About from 'scenes/about'
import Topics from 'scenes/topics'

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
  <Switch />
)

export default Routes
```

{% endcode %}

{% code title="src/App/index.js" %}

```jsx
import 'normalize.css'

import { hot } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'

import Meta from './meta'
import Layout from './layout'
import Routes from './routes'

const App = () => (
  <BrowserRouter>
    <>
      <Meta />
      <Layout />
      <Routes />
    </>
  </BrowserRouter>
)

export default hot(module)(App)
```

{% endcode %}

{% code title="src/Layout/index.js" %}

```jsx
import { Link } from 'react-router-dom'
import AppBar from '@material-ui/core/appbar'
import Toolbar from '@material-ui/core/toolbar'
import Button from '@material-ui/core/button'

const Layout = () => (
  <AppBar position="static">
    <Toolbar>
      <Button color="inherit" component={Link} to="/">
        Home
      </Button>
      <Button color="inherit" component={Link} to="/about">
        About
      </Button>
      <Button color="inherit" component={Link} to="/topics">
        Topics
      </Button>
    </Toolbar>
  </AppBar>
)

export default Layout
```

{% endcode %}

**Примечание:**  пример с *\<Button color="inherit" component={Link} to="/">* взят [отсюда](https://material-ui.com/demos/buttons/#third-party-routing-library)

Запускаем

> yarn start

Должна появится панель с тремя кнопками с возможностью переключения между страницами Home, About и Topics

**Вопрос:**

* Почему, когда несколько раз подряд жмем одну и ту же кнопку, например "Home", то каждый раз создается переход в истории. Если это тот же самый роут, то переход, наверное, не должен создаваться.