实践 react 路由详解_import { hashrouter as router, route, switch,redir-程序员宅基地

技术标签：前端

一、安装react-router-dom并启动项目

二、使用路由

1、导入路由相关组件

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<div>
        <h1>路由</h1>
</div>)
}
export default App;

2、创建首页与About页面

//创建首页
function Home(){
    return (<div>
        <h1>首页内容</h1>
</div>);
}

//创建关于页面
function About(){
    return (<div>
        <h1>关于页面内容</h1>
</div>);
}

3、配置路由：导航，页面容器

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
       </div>

</Router>);
}
export default App;

运行结果：

4、创建详情页面（带参数路由）

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
       </div>
</Router>);
}
export default App;


//创建详情页
function Details(){
    return (<div>
        <h1>详情页面<h1>
</div>);
}

运行结果：

5、获取参数


//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
       </div>
</Router>);
}
export default App;


//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
    return (<div>
        <h1>详情页面<h1>
        <p>参数：{props.match.params.id}</p>
        <p>match:{JSON.stringify(props.mach)}</p>
</div>);
}

运行结果：

三、创建子路由

1、创建Admin页面、OrderList、Dash页面

function Admin(){
 return <div>
    <h1>Admin页面</h1>
    </div>
}

function Dash(){
 return <div>
    <h2>概览页面</h2>
    </div>
}

function OrderList(){
 return <div>
    <h2>订单列表页面</h2>
    </div>
}

2、配置Admin页面以及子路由


//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
        <NavLink to="/admin">管理页面</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
         <Route path='/admin' component={Admin}></Route>
       </div>
</Router>);
}
export default App;

function Admin(){
 return <div>
    <h1>Admin页面</h1>
    <p>
    <NavLink to="/admin/dash">概览</NavLink> |
    <NavLink to="/admin/orderlist">订单列表</NavLink>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    </p>
    </div>
}

function Dash(){
 return <div>
    <h2>概览页面</h2>
    </div>
}

function OrderList(){
 return <div>
    <h2>订单列表页面</h2>
    </div>
}

//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
    return (<div>
        <h1>详情页面<h1>
        <p>参数：{props.match.params.id}</p>
        <p>match:{JSON.stringify(props.mach)}</p>
</div>);
}

3、重定向默认页面


//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
        <NavLink to="/admin">管理页面</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
         <Route path='/admin' component={Admin}></Route>
       </div>
</Router>);
}
export default App;

function Admin(){
 return <div>
    <h1>Admin页面</h1>
    <p>
    <NavLink to="/admin/dash">概览</NavLink> |
    <NavLink to="/admin/orderlist">订单列表</NavLink>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    {/*重定向dash页面*/}
    <Redirect from='/admin' to="/admin/dash"></Redirect>
    </p>
    </div>
}

function Dash(){
 return <div>
    <h2>概览页面</h2>
    </div>
}

function OrderList(){
 return <div>
    <h2>订单列表页面</h2>
    </div>
}

//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
    return (<div>
        <h1>详情页面<h1>
        <p>参数：{props.match.params.id}</p>
        <p>match:{JSON.stringify(props.mach)}</p>
</div>);
}

运行结果：

四、路由跳转history

//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数

function Home({history}){
    return (<div>
        <h1>首页内容</h1>
        <button onClick={history.goBack}>返回</button>
    </div>);
}
//不同NavLink跳转到首页
function About({match,history,location}){
    return (<div>
        <h1>关于首页内容</h1>
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>首页-输出历史记录</button>        
    </div>);
}

运行结果：

五、location地址栏信息

/创建一个详情页面
function Details({match,location}){
  return(<div>
<h1>详情内容</h1>
{/* <p>参数：{props.match.params.id}</p> */}
<p>参数：{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
  </div>);
}
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数


//不同NavLink跳转到首页
function About({match,history,location}){
    return (<div>
        <h1>关于首页内容</h1>
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>首页-输出历史记录</button>
        <NavLink to={
   {
            pathname:"/details/abc",
            search:"name=mumu&age=18",
            hash:"good",
            state:{redirect:"/about"}
        }}>详情ABC</NavLink>
    </div>);
}

运行结果：

六、404配置

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
//Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
            <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            {/* <Route path="/admin" component={Admin}></Route> */}
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
             {/* *代表匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>
           
            </Switch>
        </div>
    </Router>);
}
export default App;

//404页面
function NoMatch({location}){
    return(<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to ="/">首页</NavLink>
    </div>)
}

运行结果：

八、权限管理

1、创建一个登录页面、添加Priviate权限页面

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
            <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            {/* <Route path="/admin" component={Admin}></Route> */}
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
             {/* *代表匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>
           
            </Switch>
        </div>
    </Router>);
}
export default App;
//把props.chilren 解构为children ...rest 剩余的其他参数
function Private({children,...rest}){
    // 把Private组件的参数除了children全部转移到Route组件
    // Route不直接指定component通过render渲染出来
    return <Route {...rest} render={
        ({location})=>{
            // 如果获取本地存储的isLog得到了（登录了），返回children子节点Admin
            // 否则 返回一个Redirect组件
            // Redirect 默认跳转到 /login登录页面 传入一个state数据
            // redirect自定义值 location.pathname(本地要跳转的地址)
            return localStorage.getItem("isLog")?(children):<Redirect to={
   {pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
    }
} ></Route>
}

//登录
function Login({location,history}){
    function logIt(){
        //存储本地
        localStorage.setItem("isLog",true);
        //获取redirect信息
        // var redirect=location.state.redirect ||"/";
        var redirect =location.state && location.state.redirect ? location.state.redirect : '/';
        //如果没有拿到就跳转到首页
        history.push(redirect);
    }
    return <div>
        <h1>登录</h1>
        <button onClick={logIt}>登录</button>
    </div>
}

运行结果：

完整代码如下：

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
//Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
            <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            {/* <Route path="/admin" component={Admin}></Route> */}
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
             {/* *代表匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>
           
            </Switch>
        </div>
    </Router>);
}
export default App;
//把props.chilren 解构为children ...rest 剩余的其他参数
function Private({children,...rest}){
    // 把Private组件的参数除了children全部转移到Route组件
    // Route不直接指定component通过render渲染出来
    return <Route {...rest} render={
        ({location})=>{
            // 如果获取本地存储的isLog得到了（登录了），返回children子节点Admin
            // 否则 返回一个Redirect组件
            // Redirect 默认跳转到 /login登录页面 传入一个state数据
            // redirect自定义值 location.pathname(本地要跳转的地址)
            return localStorage.getItem("isLog")?(children):<Redirect to={
   {pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
    }
} ></Route>
}

//登录
function Login({location,history}){
    function logIt(){
        //存储本地
        localStorage.setItem("isLog",true);
        //获取redirect信息
        // var redirect=location.state.redirect ||"/";
        var redirect =location.state && location.state.redirect ? location.state.redirect : '/';
        //如果没有拿到就跳转到首页
        history.push(redirect);
    }
    return <div>
        <h1>登录</h1>
        <button onClick={logIt}>登录</button>
    </div>
}

//404页面
function NoMatch({location}){
    return(<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to ="/">首页</NavLink>
    </div>)
}

function Admin(){
    return <div>
        <h1>Admin页面</h1>
        <p>
            <NavLink to="/admin/dash">概览</NavLink>|
            <NavLink to="/admin/orderlist">订单列表</NavLink>
        </p>
        <Route path="/admin/dash" component={Dash}></Route>
        <Route path="/admin/orderlist" component={OrderList}></Route>
        <Redirect from = '/admin' to="/admin/dash"></Redirect>        
        </div>
}
function Dash(){
    return <div>
        <h2>概览页面</h2>
        </div>
}
function OrderList(){
    return <div>
        <h1>订单列表页面</h1>
        </div>
}

//创建一个详情页面
function Details({match,location}){
  return(<div>
<h1>详情内容</h1>
{/* <p>参数：{props.match.params.id}</p> */}
<p>参数：{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
  </div>);
}
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数

function Home({history}){
    return (<div>
        <h1>首页内容</h1>
        <button onClick={history.goBack}>返回</button>
    </div>);
}
//不同NavLink跳转到首页
function About({match,history,location}){
    return (<div>
        <h1>关于首页内容</h1>
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>首页-输出历史记录</button>
        <NavLink to={
   {
            pathname:"/details/abc",
            search:"name=mumu&age=18",
            hash:"good",
            state:{redirect:"/about"}
        }}>详情ABC</NavLink>
    </div>);
}

本文链接：https://blog.csdn.net/m0_67227657/article/details/124058551

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

青云Cloud文件存储-OSS_qingstor.sdk.service.qingstor-程序员宅基地

文章浏览阅读2k次。package com.hswg.jstxb.issued.api.controller;/** * Created by TongGuoBo on 2019/6/14. */import com.google.gson.Gson;import com.qingstor.sdk.constants.QSConstant;import com.qingstor.sdk.exceptio..._qingstor.sdk.service.qingstor

关于IDEA使用tomcat远程部署Windows服务器的相关配置_idea 是否支持window remote部署-程序员宅基地

文章浏览阅读1.1k次，点赞3次，收藏4次。疫情期间响应国家号召，在家待着不出门，但是又有点无聊，就搞起来一直想搞又没时间搞的服务器。网上的例程都是基于本地模拟服务器的，他们的配置方法在本地用都是好用，等到真正部署服务器的时候就出问题了，我折腾了好几天，终于部署成功，特开此贴，分享一下期间遇到的坑，废话不多说直接开始讲解。我用的服务器是租用的阿里云服务器，系统是windows server2008 R2，选用这个系统的原因是图形界面，..._idea 是否支持window remote部署

某外资集团诚招 JAVA，Web，UI，QA，BA，Big Data等技术开发测试工程师(上海)_java 上海 english-程序员宅基地

文章浏览阅读1.2k次。花旗集团诚招 JAVA，Web，UI，QA，BA，Big Data等技术开发测试工程师(上海)投简历请加微信：1208568081Data Capability Solution Lead （C13） SHANGHAI [20221349]职务描述The Data Analytics Lead Analyst is a strategic professional who stays abreast of developments within own field and contri_java 上海 english

VS2017生成一个简单的DLL文件和 LIB文件——C语言-程序员宅基地

文章浏览阅读2k次。下面我们将用两种不同的姿势来用VS2017生成dll文件（动态库文件）和lib文件（静态库文件），这里以C语言为例，用最简单的例子，来让读者了解如何生成dll文件（动态库文件）生成动态库文件姿势一：第一步：新建一个项目第二步：选择Windows桌面向导（这里先不要去管上面的“动态链接库(DLL)”）第三步：选择动态链接库，并空项目打勾√..._vs 生成dll时.lib文件中是哪个文件中的函数

java.lang包的简单介绍_java.lang是什么意思-程序员宅基地

文章浏览阅读7.3k次，点赞2次，收藏19次。java.lang包是Java语言的核心类库（lang是language的缩写），包括了运行Java程序必不可少的系统类，如基本数据类型、基本数学函数、字符串处理、线程、异常处理类等。每个Java程序运行时，系统都会自动地引入java.lang包，所以这个包的加载是缺省的。 ..._java.lang是什么意思

IntelliJ-IDEA编译Maven工程如何跳过test代码_idea编译跳过test-程序员宅基地

文章浏览阅读9.9k次。_idea编译跳过test

随便推点

JavaScript实现背景图像切换3D动画效果_js动态切换显示图片-程序员宅基地

文章浏览阅读6.4w次，点赞56次，收藏59次。给一张长图，长图中有好多个图像，图像的动作是连续的，当鼠标在容器内移动时，背景图像会随之切换，呈现出连续的动画效果，实现效果类似于3D动画，用JS怎么实现？_js动态切换显示图片

tiktok达人带货怎么操作？-程序员宅基地

文章浏览阅读404次，点赞10次，收藏9次。海外版抖音作为一款短视频平台，与传统的长视频平台不同，短视频平台的用户以较年轻的用户群体为主，那么这也就间接的决定了我们外贸人在海外版抖音上销售的商品不能是太过于贵的，如果一旦海外版抖音上上架的商品太贵的话，我们就很有可能丧失掉绝大部分的年轻用户，因为这部分的年轻用户大多数还没有稳定的工作，或者工作经验少，工资较低，不能够支撑其太贵的货物购买需求。TikTok上面的内容比较多样化，木身覆盖的用户群也足够大，所以吸引的人群比较多样，不管是内容营销还是网红营销，都能带来巨大的低成本曝光。TikTok+独立站。

华为EI和HiAI概览_华为hi和ei的区别-程序员宅基地

文章浏览阅读346次。_华为hi和ei的区别

Qt更改字体为思源黑体_qt 思源黑体-程序员宅基地

文章浏览阅读5.8k次，点赞4次，收藏20次。由于微软雅黑字体版权限制，现更改Qt应用程序默认字体为思源黑体-Mdeium黑度。直接在ui环境中更改字体需要运行机安装过思源黑体，故而只能在qrc中添加字体文件SourceHanSansCN-Medium.otf，然后在main函数中动态加载字体文件： int loadedFontID = QFontDatabase::addApplicationFont(":font/SourceHanSansCN-Medium.ttf"); QStringList loadedFontFa..._qt 思源黑体

python-docx高亮单词_python查找单词高亮显示-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏8次。最近在读经济学人，阅读的时候遇到不认识的单词不想停下来查词典，我寻思如果这些单词的中文解释自动标注在旁边就好了。之前我已经做了个小工具(link)，阅读的时候运行程序不断读取剪切板里的英文单词，并生成对应的中文解释，但是我无法在手机上使用程序。为了解决这个问题，我需要利用计算机将文章里我可能不认识的单词自动翻译并标注，这样省去了手机上阅读时的查询过程，从而实现流畅阅读。代码思路1.以雅思词库（7600）作为我认识的词汇，创建excel文件word_list(将来会将更多单词写入文件，并利用excel排_python查找单词高亮显示

喝汽水问题（C语言）_祝大家题题都ac-程序员宅基地

文章浏览阅读363次，点赞9次，收藏10次。刷题_祝大家题题都ac