是否可以在不重新加载页面的情况下修改url？

Question

在某个时候，进入我的应用程序，我从回调中收到一些查询参数。我需要将它们存储到redux存储中，并且在重定向之后，页面上的用户需要修改URL而不重新加载页面。

实际上，我正在使用<nav> <ul class="menu"> <li><a class="homer" href="#">PERSONAJES</a> <li><a href="#"><i class="fa fa-camera"></i>EL JUEGO</a> <ul class="sub-menu"> <li> <div> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122 112" style=" width: 35px; height: 35px; transform: translate(0px, 42px); stroke: black; stroke-width: 10px; /* margin-top: -7px; */ " xml:space="preserve"> <g transform="translate(0.000000,112.000000) scale(0.100000,-0.100000)"> <path d="M492,1110c-19-4-57-23-85-42c-29-19-73-43-99-52c-46-17-48-19-48-56c0-33,4-39,26-44l27-7l-7-79c-3-44-18-118-31-165 c-42-145-95-235-207-351L0,243l122-48C449,67,564,29,586,41c16,8,35,6,89-10c51-16,71-18,81-10c8,6,25,9,38,5c16-4,26-1,29,8 s15,12,31,9c19-4,26-1,26,11c0,10,9,16,25,16s25,6,25,16c0,21,60,44,115,44c33,0,45,4,45,15c0,10,10,15,30,15c21,0,28,4,24,14 s2,12,21,9c20-4,24-2,19,11c-4,10-1,16,9,16s1,26-32,93c-68,136-107,270-126,429c-7,56-6,57,19,64c22,5,26,11,26,45 c0,33-4,41-25,49c-14,5-25,17-25,27s-9,32-19,49c-22,37-96,69-137,61c-18-3-38,3-62,19c-25,17-49,24-84,24s-58,6-75,20 c-14,11-35,20-47,20c-15,0-10-6,19-20c22-11,31-17,20-14c-47,16-98,16-138-2c-79-34-128-95-126-156c1-31,2-31,8,8 c12,73,60,122,142,144c40,11,102,3,93-12c-4-5-17-7-30-4c-59,15-160-36-184-93c-13-33-6-106,11-96c5,4,9-3,9-14c0-16-6-21-28-21 c-34,0-58,23-67,65l-6,30l15-31c7-18,19-35,26-39s4,4-5,19c-57,86,20,198,159,232c28,7,40,12,26,12S510,1114,492,1110z M791,1044 c17-8,29-17,27-20c-3-2-19,3-36,12c-74,36-206-37-230-129c-6-22-7-35-1-31c5,3,12-8,15-25c4-18,13-31,21-31s13-7,11-17 c-5-27-46-28-74-2c-41,38-28,117,30,187c15,17,23,32,18,32c-12,0-62-57-62-71c0-7-59-2-69,7c-6,5,31,44,52,56c10,5,37,11,60,13 s58,10,77,19C675,1064,753,1064,791,1044z M780,1020c13-9,13-10,0-11c-8-1-24,0-34,1c-60,6-148-45-173-100c-7-16-12-19-12-9 c-2,29,43,82,88,106C695,1031,754,1037,780,1020z M345,998c-4-10-15-13-33-10l-27,5l30,13C349,1020,353,1019,345,998z M991,972 c16-18,29-40,29-50c0-11-6-6-16,14c-18,37-62,64-103,64c-59,0-181-80-181-119c0-9,11,1,25,21c31,45,97,78,157,78c47,0,68-12,89-52 c13-24-1-18-38,14c-28,26-81,25-137-1c-46-23-71-51-82-95c-8-35,2-74,22-78c13-3,13-5,1-22c-13-17-18-18-44-7c-31,12-53,47-52,79 c0,9,7,0,15-20c9-20,22-39,30-42c9-4,7,5-7,23c-33,45-30,101,7,148c52,65,97,84,183,81C957,1005,964,1002,991,972z M317,972 c17-11,4-55-14-48c-8,3-17,6-19,6s-4,11-4,25C280,980,294,987,317,972z M720,975c0-3-12-22-28-43c-26-37-29-38-60-28l-33,11l28,26 c15,15,35,29,43,32C690,980,720,981,720,975z M490,898c0-26-2-28-27-22c-40,10-43,13-43,38c0,32,7,35,41,23 C483,928,490,919,490,898z M903,932c-8-5,17-15,63-27c41-10,77-22,79-25c2-4-25-17-60-29c-64-23-65-23-140-5c-41,10-75,21-75,24 c0,17,54,54,87,60C910,941,917,941,903,932z M651,881c3-3,3-18,0-33c-6-26-7-26-38-13s-44,41-27,58C594,900,641,891,651,881z M392,811c32-16,58-2,58,30c0,11,7,19,15,19c17,0,21-26,5-33c-6-3-5-4,2-3s23-10,35-25c13-15,35-30,50-34c21-5,24-8,12-16 c-7-5-10-9-5-9c19,0,46,34,46,57c0,25,1,26,24,17c9-3,16-14,16-23c0-21,44-63,84-80c24-10,27-14,15-22c-8-5-9-9-3-9 c16,0,44,45,44,70c0,18,4,20,23,14c44-14,65-23,70-31c8-14-21-195-44-268c-36-118-107-244-194-346c-25-30-52-54-60-54 c-7,0-17-4-22-9s-2-6,6-1c9,5,12,4,7-3c-4-7-20-6-52,5c-34,11-42,18-33,25c10,7,8,8-7,3c-23-6-219,64-414,146l-45,20l74,77 c42,42,75,79,76,82c0,3,14,30,32,60c35,61,77,164,92,225c12,51,26,147,22,160c-1,6,8,1,21-10C355,833,377,818,392,811z M853,830 c56-13,57-14,57-47c0-28-3-33-17-29c-10,3-45,14-78,24c-60,18-74,34-61,68c4,11,11,12,23,6C787,846,821,837,853,830z M1030,828 c0-22-14-35-54-52c-48-20-46-21-46,8c0,22,21,38,52,41c3,0,10,3,14,8C1008,844,1030,841,1030,828z M1014,613c5-5,6,6,3,25 c-8,39,0,42,13,6c7-18,7-31,0-39c-26-31,22-204,91-332c34-62,37-73,22-73c-10,0-24,10-32,22c-37,60-91,180-97,217 c-4,23-11,44-15,47c-11,6-11,12,1-60c5-33,13-62,18-65s29-45,54-92c39-74,42-86,25-81c-15,4-18,2-12-9s4-11-8,1c-21,19-50,90-38,90 c5,0,13-9,16-21c4-11,9-18,12-16c9,9-17,47-32,47c-21,0-19-17,10-79c14-29,20-49,13-44c-15,12-70,8-97-7c-17-8-17-6-9,33 c20,93,21,100,9,93c-7-4-9-16-6-27c4-10,2-19-4-19c-5,0-13-24-16-53c-4-30-11-60-15-68c-15-24-22-2-11,37c24,90,55,394,39,394 c-3,0-9-35-12-77c-9-112-44-335-60-380c-8-21-15-32-15-25c-1,7-5,11-9,8c-9-6,19,176,28,184c4,3,6,21,6,40s4,44,8,55 c11,27,15,75,19,235c2,74,2,106,1,70c-6-102-26-234-34-221c-4,7-5,24-2,39s2,25-1,21c-4-3-9-30-12-60c-15-137-50-272-94-357 c-24-47-24-47-87-31c-51,13-53,29-3,45c29,9,39,22,71,87c21,42,39,91,41,109s15,60,29,93s31,82,39,108c10,36,15,43,21,30 c5-12,7-4,6,22c-1,22,2,77,7,123c6,71,10,82,26,82c15,0,19-7,19-40c0-22,4-40,9-40s7,19,4,42c-3,33,0,45,14,56c17,12,19,8,28-62 C1001,655,1009,618,1014,613z M1017,703c-2-16-4-5-4,22c0,28,2,40,4,28C1019,740,1019,718,1017,703z M1093,426c9-21,15-42,12-46 c-3-5-1-11,5-15s7-11,4-17c-10-16-25,14-18,36c5,13,3,16-7,11c-9-6-11-4-6,8c3,9,2,17-3,19c-13,4-37,89-31,113c3,14,8,7,16-25 C1072,485,1084,448,1093,426z M889,377c0-12-4-31-9-42c-7-15-9-8-7,27c1,25,5,44,10,41C887,401,890,389,889,377z M1145,280 c14-27,23-50,21-50c-5,0-56,86-56,94C1110,340,1122,325,1145,280z M866,273c-4-21-11-65-17-98c-17-99-30-135-51-135 c-20,0-21,1-12,24c3,9,11,13,16,10c6-4,8-1,6,7c-3,8,0,28,7,46c7,17,21,65,30,107C862,312,878,340,866,273z M770,241 c-10-27-28-69-40-95c-20-41-25-45-48-39c-14,3-23,2-20-3s-5-17-18-27c-35-26-30-15,22,45c25,29,62,79,81,111c20,31,37,57,39,57 S781,268,770,241z"></path> <path d="M712,830c0-19,2-27,5-17c2,9,2,25,0,35C714,857,712,849,712,830z"></path> <path d="M330,833c0-6,6-16,14-22c10-8,12-20,6-39c-5-15-16-63-25-107c-26-123-89-248-169-332c-37-39-63-74-57-77 c15-9,235-94,353-136l107-37l29,31c51,55,90,111,131,187c56,104,78,165,94,259c14,80,14,82-7,90c-25,11-307,95-389,117 c-32,9-54,19-48,23c7,4,2,15-14,30C341,833,330,839,330,833z M455,742c50-16,150-46,222-67l133-39l-6-41c-11-76-44-186-75-248 c-40-79-111-186-148-221l-28-27l-221,82l-221,82l58,63c93,99,152,223,181,377c7,37,13,67,14,67C364,770,406,757,455,742z"></path> <path d="M492,670c-40-9-102-66-102-92c0-10,11-23,24-30c21-9,29-7,56,16c57,47,124,26,118-38c-3-28-8-32-51-43c-61-15-93-35-117-76 c-25-41-25-64-1-77c37-19,55-11,83,35c15,25,23,45,18,45s-19-18-31-40c-24-43-35-47-63-27c-17,12-17,16-3,43c23,44,50,64,108,79 c30,8,60,22,67,32c29,39-12,113-63,113c-12,0-39-11-59-25c-44-30-66-32-66-7c0,37,71,82,128,82c15,0,45-9,66-21c21-11,40-18,43-15 c7,7-59,46-79,46c-9,0-22,2-30,4C531,676,510,674,492,670z"></path> <path d="M667,558c6-66-35-122-96-131c-14-2-27-9-28-14c-9-25,78,10,107,44c34,38,45,112,21,136C666,598,664,583,667,558z"></path> <path d="M354,306c-12-9-24-24-27-36c-7-26,28-70,57-70c32,0,66,28,66,53C449,302,393,333,354,306z M424,284c19-18,19-20,6-45 c-20-36-90-19-90,21C340,298,395,314,424,284z"></path> <path d="M811,278c-17-59-61-159-79-180c-8-10-25-18-36-18c-20-1-20-1-3-11c30-17,46-3,77,67c32,71,65,173,58,180 C825,318,818,301,811,278z"></path> <path d="M997,238c3-17,14-39,25-50c23-23,23-21-2,36C996,278,988,283,997,238z"></path> </g> </svg> </div> <a id="retosdiarios" href="#" style="">Retos Diarios</a> </li> <li style=" width: 166px; "> <div> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 105 76" xml:space="preserve" style=" width: 30px; height: 30px; transform: translate(0px, 45px); stroke: black; stroke-width: 15px; "> <g transform="translate(0.000000,76.000000) scale(0.100000,-0.100000)"> <path d="M138,696l-26-24l49-132c27-73,49-136,49-140c0-6-41-93-168-352c-2-5,40-8,93-8c114,0,147,16,166,81c7,21,15,39,19,39 c3,0,12-27,18-60l13-60l192,1c251,2,241-4,235,141l-4,108h30c77,2,176,65,197,127c17,52,6,170-21,223c-37,72-68,80-326,79 c-208,0-221-1-251-22c-18-12-35-33-39-47c-6-23-8-21-21,23l-14,47h-82C175,719,162,716,138,696z M316,688c3-5,14-37,23-71 c10-34,22-62,26-62c5,0,22,32,38,72l29,72h74h74l-61-122c-33-67-64-130-69-139c-7-12,8-55,55-165c36-81,69-156,75-165 c9-17,3-18-80-18c-90,0-90,0-96,27c-27,117-41,167-49,170c-6,1-26-41-46-95l-37-97l-80-3l-80-3l84,171l83,170l-44,118 c-24,64-47,125-51,135c-6,17-1,18,60,16C281,698,313,693,316,688z M923,677c40-26,57-69,64-160c5-75,3-85-19-117 c-29-42-71-59-154-59l-62-1l5-125l5-125h-66h-66v238c0,130-3,268-7,305l-6,69l139-4C869,696,901,692,923,677z M213,553l46-123 l-85-176C128,157,87,79,85,82c-3,3,28,73,70,157c41,83,75,156,75,161c0,6-22,68-49,139c-34,92-45,133-38,140 C159,695,163,688,213,553z M609,383c0-270-2-304-14-273c-18,48-21,550-3,568c7,7,13,12,15,12S610,552,609,383z M384,624 c-9-21-19-34-21-27c-5,13,26,78,33,70C398,665,393,646,384,624z M563,397c2-114,2-206,0-203c-3,3-26,53-52,113l-46,108l45,101 c25,56,46,98,47,95S560,511,563,397z M865,320c-3-5-26-10-51-10c-59,0-50,14,11,18C854,329,869,327,865,320z M374,165 c17-70,16-95-3-95c-13,0-41,123-34,148C346,256,356,243,374,165z M198,63c-21-2-55-2-75,0c-21,2-4,4,37,4S218,65,198,63z M523,63 c-24-2-62-2-85,0c-24,2-5,4,42,4S546,65,523,63z M703,63c-18-2-48-2-65,0c-18,2-4,4,32,4S720,65,703,63z"></path> <path d="M740,576c0-18,3-54,6-80c7-46,7-46,45-46c50,0,74,32,66,91c-7,55-22,69-73,69C741,610,740,609,740,576z M828,577 c20-15,14-107-7-107c-4,0-8,17-9,38c-1,26-9,43-27,59c-14,12-25,25-25,28C760,603,812,589,828,577z M793,521c4-19,6-40,3-48 c-11-29-30-6-33,41C758,571,779,575,793,521z"></path> </g> </svg> </div> <a id="puntosdeexperiencia" href="#" style=" text-indent: 19px; margin-right: -15px; margin-top: -2px; ">Puntos De Experiencia</a> </li> <ul> </nav>。它可以工作，但是如果我转到另一条路线（我的内部路线），它将实际链接连接到实际（已替换）

Answer 1

函数reload中的代码是静态的，即，仅当您调用它时才会执行。如果在调用它时，窗口的宽度不超过1000px，则您的函数将无法执行任何操作。

您需要改为监听resize事件：

window.location.replace(window.location)

Answer 2

我不使用redux（使用mobx），但是我通常使用下面的代码来更新url，而无需刷新页面。

第一部分从第二个片段@computed get url()监听URL，并在其更改时自动更新URL。

autorun(() => {
    const path = store.navigation.url
    if (path !== window.location.pathname) {
        window.history.pushState(null, null, path)
    }
})

这部分只是为了找出要放入网址的内容：按一个将@observable view: View = "home"切换为@observable view: View = "hooks"的标签，网址将从site.com更改为site.com/hooks

@observable view: View = "home"
......
@computed get url() {
        switch (this.view) {
            case "home":
                return '/'
            case "hooks":
                return 'hooks'
            case "fields":
                return "fields"
            case "validation":
                return 'validation'
            case "reusable":
                return 'reusable'
            case "profile":
                return 'profile'
            case "userProfile":
                return 'userProfile'
            case "review":
                return 'review'
        }
    }