zoukankan      html  css  js  c++  java
  • react中操作react-router-dom路由

    在src里新建一个comsrctros再建两个两个文件夹,分别命名为“pink”和“red”。文件夹命名为

    建一个路由组件文件夹,命名为“pink”,里面有一个rpink.js和pinkcss并编写如下代码

    import  React  from 'react';
    import "./pink.css"
    class  Pink extends React.Component{
          render(){
                return(
                     <div  class="weibo">
                         <a>pink</a>
                     </div>
                )
          }
    }
    export  default Pink;
    第二个页面
    import  React  from 'react';
    import "./pink.css"
    class  Red extends React.Component{
          render(){
                return(
                     <div  class="weibo">
                         <a>pink</a>
                     </div>
                )
          }
    }
    export  default Red;
    detail.js
     
    然后再新建一个路由组件文件夹,命名为“Red”,里面有一个red.js和red.css并编写如下代码:
    然后 建立一个green  文件夹
    通过函数跳转
    import React from 'react';
    import { BrowserRouter, Route, Switch,Link } from "react-router-dom";
    import "./green.css"
    import Pink from '../Pink/Pink.js';
    import Red from '../red/red.js';
    import Routers from '../Router/Router.js';
    class green extends React.Component {
        render() {
            return (
                <BrowserRouter>
                    <div class="liulist">
                        <ul>
                            <li>
                                <Link to="/pink">首页</Link>
                            </li>
                            <li>
                                <Link to="/red">详情</Link>
                            </li>
                            <li>
                                <Link to="/routers">内容</Link>
                            </li>
                        </ul>
                    </div>
                    <Switch>
                        <Route path="/pink" exact component={Pink} />
                        <Route path="/red"exact  component={Red} />
                        <Route path="/routers"exact  component={Routers} />
                    </Switch>
                </BrowserRouter>
            )
        }
    }
    export default green;
    app.js中调用
    import React from 'react';
    import './App.css';
    import Green from "./componter/green/green.js"
    标签名必须大写
    class App extends React.Component{
          render(){
            return(
                 <div>
                   <Green/>
                   </div>

            )
          }
    }

    export default App;
     
     
     
     
     
     
     
  • 相关阅读:
    来自风湿病研究院RA患者队列研究显示, RA日常诊治时特别是早期RA患者成功维持新ACR/EULAR缓解标准能获
    系列超声发现脊柱关节炎附着点处新骨形成
    超声(PDUS)能否容易检出侵蚀?比较PDUS与microCT对正常人群和RA患者小关节生理和皮质断裂的评价
    根据ACR/EULAR 2010 标准定义RA放射学侵蚀病变
    比较依那西普和柳氮磺胺吡碇治疗早期中轴脊柱关节炎1年后的停药缓解率和缓解时间-ESTHER试验的2年数据
    Matlab Computer Vision and Pattern Recognition toolbox
    vi/vim 命令手册(初级篇)
    GCC设定include和库路径(转载)
    linux 下查找文件或者内容常有命令
    svn命令在linux下的使用
  • 原文地址:https://www.cnblogs.com/yangjingyang/p/11574586.html
Copyright © 2011-2022 走看看