React JS Router — маршрутизатор

1580509@gmail.com 24.07.2018

От автора: в этой главе мы рассмотрим, как с помощью React Router настроить маршрутизацию для приложения.

Шаг 1 — Установите маршрутизатор React Router

Простым способом установки маршрутизатора React является запуск следующего фрагмента кода в окне командной строки.

C:\Users\username\Desktop\reactApp>npm install react-router-dom

Настройте файл .babelrc в корне проекта, как показано ниже:

C:\Users\username\Desktop\reactApp>\type nul>.babelrc

Добавьте следующий код в файл .babelrc

{ "presets": ["es2015", "react"]
}

Создайте файл index.html в корневом каталоге и добавьте в него следующий код:

<!DOCTYPE html>
<html lang = "en"> <head> <meta charset = "UTF-8"> <title>React Router Tutorial</title> </head> <body> <div id = "app"></div> <script type = "text/javascript" src = "bundle.js"></script> </body> </html>

Чтобы настроить файл webpack.config.js, добавьте в webpack.config.js следующий код:

module.exports = { entry: './app/main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ } ] }, devServer: { port: 7777 }
};

Шаг 2 — Добавьте маршрутизатор

Теперь мы добавим маршруты в приложение. Вместо рендеринга элемента App, как в предыдущем примере, создайте папку с именем App и в ней файлы — main.js и App.js

main.js

import React from 'react';
import { render } from 'react-dom';
import App from './App'; render(<App />, document.getElementById('app'));

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Login from './Login'; class App extends Component { render() { return ( <Router> <div> <h2>Welcome to React Router Tutorial</h2> <ul> <li><Link to={'/'}>Home</Link></li> <li><Link to={'/Login'}>Login</Link></li> </ul> <hr /> <Switch> <Route exact path='/' component={Home} /> <Route exact path='/Login' component={Login} /> </Switch> </div> </Router> ); }
}
export default App;

Шаг 3 — Создание компонентов

На этом этапе мы создадим в каталоге App два компонента: (Home) и (Login).

Home.js

import React, { Component } from 'react'; class Home extends Component { render() { return ( <div> <h2>Home</h2> </div> ); }
}
export default Home;

import React, { Component } from 'react';
import ReactDOM from 'react-dom'; class Login extends Component { render() { return ( <div> <h2>Login</h2> </div> ); }
}
export default Login;

Когда приложение будет запущено, мы увидим две кликабельные ссылки, которые можно использовать для изменения маршрута.