react路由相关

2020-08-13 17:31:17 阅读：160 来源： 互联网

react创建组件　　

例

import React, { Component } from 'react';
class 组件名 extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  );
    }
}
 
export default 组件名;

react引入组件需要用import引入

react里面的注释　　　　 {/* 内容 */} 　　　　如果是jsx语法的话用{/* */} 　　　　如果是js语法的话 // 或者 /* */

react的路由需要在下载的包

　　　　npm i react-router-dom --save

引入react的路由,引入相应的组件　　　　

　　　　import { Route,NavLink ,Redirect ,BrowserRouter as Router} from 'react-router-dom'

　　BrowserRouter as Router 表示引入BrowserRouter 并用 Router 的名字来代替，在app.js里面<Router></Router>；

　　Route表示每个路由，path是输入的地址，component是引入的组件的名字；

　　Redirect表示路由的重定向；

　　NavLink 表示需要路由到的地方，to表示到哪个路由

 render() { 
    return ( 
      <div>
        <Router>
          <Route path='/message' component={Message} />
          <Route path='/tong' component={Txl} />
          <Route path='/find' component={Find} />
          <Route path='/mine' component={Mine} />
          <Redirect from="/*" to="/message" /> {/*路由重定向*/}
          <Footer/>
        </Router>
      </div>    
    );
  }

<footer className="footerMenu">
                <ul>
                    <li><NavLink  to='/message'>消息</NavLink></li>
                    <li><NavLink  to='/tong'>通讯录</NavLink></li>
                    <li><NavLink  to='/find'>发现</NavLink></li>
                    <li><NavLink  to='/mine'>我的</NavLink></li>
                </ul>
            </footer>

　　二级路由：

　　　　在每个一级路由到的位置，写下路由

                <Route path ="/mine/login"    component = {Login} ></Route>
                <Route path = "/mine/reg" component = {Reg} ></Route>

标签：Router,react,组件,import,引入,相关,路由
来源： https://www.cnblogs.com/52580587zl/p/13497679.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react路由相关