鍍金池/ 教程/ HTML/ ReactJS路由器
ReactJS動畫
ReactJS組件狀態(tài)（State)
ReactJS簡介
ReactJS開發(fā)環(huán)境設(shè)置
ReactJS Refs
ReactJS組件API
ReactJS高階組件
ReactJS組件
ReactJS props簡介
ReactJS教程
ReactJS組件生命周期
ReactJS鍵(Key)
ReactJS事件
ReactJS最佳實踐
ReactJS props驗證
ReactJS表單
ReactJS JSX
ReactJS路由器
ReactJS通量概念

ReactJS路由器

在本章中，我們將學(xué)習(xí)如何為應(yīng)用程序設(shè)置路由。

第1步 - 安裝React Router

安裝react-router的簡單方法是在命令提示符窗口中運行以下代碼：

F:\worksp\reactjs\reactApp>npm install react-router

在項目的根目錄下創(chuàng)建.babelrc文件，并在.babelrc文件中添加以下代碼 -

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

創(chuàng)建一個文件：index.html在根目錄下，并使用以下的代碼 -

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React Router示例</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: 8080
   }
};

第2步 - 添加一個路由器

現(xiàn)在，我們將添加路線到應(yīng)用程序。 創(chuàng)建一個名為App的目錄，并創(chuàng)建文件并命名為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步 - 創(chuàng)建組件

在這一步中，我們將在App目錄中創(chuàng)建兩個組件(Home)和(Login)。

文件：Home.js - 

import React, { Component } from 'react';

class Home extends Component {
   render() {
      return (
         <div>
            <h2>Home</h2>
         </div>
      );
   }
}
export default Home;

文件：Login.js - 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Login extends Component {
   render() {
      return (
         <div>
            <h2>Login</h2>
         </div>
      );
   }
}
export default Login;

當(dāng)應(yīng)用程序啟動時，我們將看到兩個可用于更改路由的鏈接。


上一篇：ReactJS事件下一篇：ReactJS組件