📌  相关文章
📜  ReactJS-路由器

📅  最后修改于: 2020-10-20 04:50:52             🧑  作者: Mango

在本章中，我们将学习如何为应用设置路由。

第1步-安装React路由器

安装react-router的一种简单方法是在命令提示符窗口中运行以下代码段。

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

第2步-创建组件

在此步骤中，我们将创建四个组件。 App组件将用作选项卡菜单。路线更改后，其他三个组件（主页），（关于）和（联系人）将呈现。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         

            
    
            
  • Home
    • 
            
  • About
    • 
            
  • Contact
    • 
            

            {this.props.children}
         

      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         

            
Home...

         

      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         

            
About...

         

      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         

            
Contact...

         

      )
   }
}
export default Contact;

第3步-添加路由器

现在，我们将路由添加到应用程序。这次将渲染路由器，而不是像上一个示例那样渲染App元素。我们还将为每个路线设置组件。

main.js

ReactDOM.render((
   
      
         
         
         
         
      
   
), document.getElementById('app'))

启动应用程序后，我们将看到三个可单击的链接，可用于更改路线。

可点击的链接