Javascript

react-router-dom路由switch使用详解

本文主要是介绍react-router-dom路由switch使用详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

简介

 使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。    本文主要针对react-router-dom进行说明。

 

 <Switch>是唯一的因为它仅仅只会渲染一个路径。相比之下（不使用<Switch>包裹的情况下），每一个被location匹配到的<Route>将都会被渲染。

安装

首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

基本操作

然后我们新建两个页面，分别命名为“home”和“detail”。在页面中编写如下代码：

复制代码 
import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>去detail</a>
            </div>
        )
    }
}
复制代码

 

home.js

import React from 'react';
复制代码 
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>回到home</a>
            </div>
        )
    }
}
复制代码

 

detail.js

然后再新建一个路由组件，命名为“Router.js”，并编写如下代码：

复制代码 
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';


const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/detail" component={Detail}/>
        </Switch>
    </HashRouter>
);
export default BasicRoute;
 
复制代码

 



如上代码定义了一个纯路由组件，将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面。


 





然后在入口文件中——我这里指定的是index.js——编写如下代码：


复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);

复制代码


 


这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果，在地址栏输入“http://localhost:3000/#/”：





 


 输入“http://localhost:3000/#/detail”：



 


如果不使用 switch 


两个组件都打印

                    

                        这篇关于react-router-dom路由switch使用详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
                    


                


                
                
 

                
                

                    

                        
您可能喜欢

                        
                    

                

                

            

             
            
            
            
        

        
        

        

            

                
栏目导航