zoukankan      html  css  js  c++  java
  • React 路由

    1.  下载插件

    yarn add react-router-dom --save / npm i react-router-dom --save
    

    2.  配置基础路由

    import { BrowserRouter, Route, Link } from 'react-router-dom'
    
    <Provider>
        <BrowserRouter>
            <div>
                <ul>
                    <li>
                        <Link to="/">一营</Link>
                    </li>
                    <li>
                        <Link to="/Erying">二营</Link>
                    </li>
                    <li>
                        <Link to="/Qibing">骑兵连</Link>
                    </li>
                </ul>
                    // exact用来精准匹配路由
                 <Route path="/" exact component={App} />
                 <Route path="/Erying" component={Erying} />
                 <Route path="/Qibing" component={Qibing} />
            </div>
        </BrowserRouter>
    </Provider>
    

    3.  重导向(Redirect)

    import { Redirect } from 'react-router-dom'
    
    <Redirect to="/somePath" ></Redirect> // 每次页面加载首先进这个地址
    

      4. Switch匹配

    import { Switch } from 'react-router-dom'
    
    <Switch>
       <Route path="/" exact component={App} />
       <Route path="/Erying" component={Erying} />
       <Route path="/Qibing" component={Qibing} />  
       <Route component={NoMatch} />  // 没有匹配到任何地址, 404的情况  
    </Switch>
    

      5.  子路由嵌套

    <Route path="/" render={() => 
         <Admin>
              <Switch>                                    
                  <Route path="/home" component={ Home } />
                  <Route path="/ui/buttons" component={ Buttons }></Route>
                  <Route path="/form/login" component={ FormLogin }></Route>
                  <Route path="/charts/line" component={ ChartLine }></Route>
                  <Route path="/permission" component={ PermissionIndex }></Route>
                  <Redirect to="/home" />
                  <Route component={ NoMatch }  />
               </Switch>
         </Admin>
    }/>
    

      

     

  • 相关阅读:
    前端开发一些必须知道的相关技术
    页面实现复制功能
    使用localstorage及js模版引擎 开发 m站设想
    jsonp 使用示例
    js 阻止事件冒泡
    html doctype 作用
    localstorage 使用
    跨域技术-jsonp
    mysql实现高效率随机取数据
    mysql主从同步报slave_sql_running:no的解决方案
  • 原文地址:https://www.cnblogs.com/Xmforever/p/10355741.html
Copyright © 2011-2022 走看看