От автора: в этой главе мы рассмотрим, как с помощью React Router настроить маршрутизацию для приложения.
Шаг 1 — Установите маршрутизатор React Router
Простым способом установки маршрутизатора React является запуск следующего фрагмента кода в окне командной строки.
|
1 |
C:\Users\username\Desktop\reactApp>npm install react-router-dom |
Настройте файл .babelrc в корне проекта, как показано ниже:
|
1 |
C:\Users\username\Desktop\reactApp>\type nul>.babelrc |
Добавьте следующий код в файл .babelrc
|
1 2 3 |
{ "presets": ["es2015", "react"] } |
Создайте файл index.html в корневом каталоге и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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 следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 3 4 5 |
import React from 'react'; import { render } from 'react-dom'; import App from './App'; render(<App />, document.getElementById('app')); |
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React, { Component } from 'react'; class Home extends Component { render() { return ( <div> <h2>Home</h2> </div> ); } } export default Home; |
Login.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Login extends Component { render() { return ( <div> <h2>Login</h2> </div> ); } } export default Login; |
Когда приложение будет запущено, мы увидим две кликабельные ссылки, которые можно использовать для изменения маршрута.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
