What is the “key” which changes on every route change with connected-react-router?









up vote
0
down vote

favorite












When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history.



Another property changes as well: router.location.key, to a new random string.



The diff between two states, showing how key changes alongside a pathname.



Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates.



The diff between two states, showing how only the key changes.



What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which updates on very action dispatch? Why is it not a number which simply increments?










share|improve this question

























    up vote
    0
    down vote

    favorite












    When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history.



    Another property changes as well: router.location.key, to a new random string.



    The diff between two states, showing how key changes alongside a pathname.



    Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates.



    The diff between two states, showing how only the key changes.



    What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which updates on very action dispatch? Why is it not a number which simply increments?










    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history.



      Another property changes as well: router.location.key, to a new random string.



      The diff between two states, showing how key changes alongside a pathname.



      Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates.



      The diff between two states, showing how only the key changes.



      What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which updates on very action dispatch? Why is it not a number which simply increments?










      share|improve this question













      When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history.



      Another property changes as well: router.location.key, to a new random string.



      The diff between two states, showing how key changes alongside a pathname.



      Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates.



      The diff between two states, showing how only the key changes.



      What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which updates on very action dispatch? Why is it not a number which simply increments?







      redux react-router-v4 connected-react-router






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 2 days ago









      Lazar Ljubenović

      8,34512451




      8,34512451






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          connected-react-router simply stores the location object from react-router which in turn creates the location object using the history package. In the readme of history the key property is described:




          Locations may also have the following properties:



          location.key - A unique string representing this location (supported in
          createBrowserHistory and createMemoryHistory)




          It is used internally (e.g. in https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js to find locations in the current history stack) and should be treated as an implementation detail of react-router. I suspect a random key instead of a incrementing sequence number was simply the easiest way to implement unique ids (you don't have to store the current sequence number).






          share|improve this answer




















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













             

            draft saved


            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237729%2fwhat-is-the-key-which-changes-on-every-route-change-with-connected-react-route%23new-answer', 'question_page');

            );

            Post as a guest






























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            1
            down vote



            accepted










            connected-react-router simply stores the location object from react-router which in turn creates the location object using the history package. In the readme of history the key property is described:




            Locations may also have the following properties:



            location.key - A unique string representing this location (supported in
            createBrowserHistory and createMemoryHistory)




            It is used internally (e.g. in https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js to find locations in the current history stack) and should be treated as an implementation detail of react-router. I suspect a random key instead of a incrementing sequence number was simply the easiest way to implement unique ids (you don't have to store the current sequence number).






            share|improve this answer
























              up vote
              1
              down vote



              accepted










              connected-react-router simply stores the location object from react-router which in turn creates the location object using the history package. In the readme of history the key property is described:




              Locations may also have the following properties:



              location.key - A unique string representing this location (supported in
              createBrowserHistory and createMemoryHistory)




              It is used internally (e.g. in https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js to find locations in the current history stack) and should be treated as an implementation detail of react-router. I suspect a random key instead of a incrementing sequence number was simply the easiest way to implement unique ids (you don't have to store the current sequence number).






              share|improve this answer






















                up vote
                1
                down vote



                accepted







                up vote
                1
                down vote



                accepted






                connected-react-router simply stores the location object from react-router which in turn creates the location object using the history package. In the readme of history the key property is described:




                Locations may also have the following properties:



                location.key - A unique string representing this location (supported in
                createBrowserHistory and createMemoryHistory)




                It is used internally (e.g. in https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js to find locations in the current history stack) and should be treated as an implementation detail of react-router. I suspect a random key instead of a incrementing sequence number was simply the easiest way to implement unique ids (you don't have to store the current sequence number).






                share|improve this answer












                connected-react-router simply stores the location object from react-router which in turn creates the location object using the history package. In the readme of history the key property is described:




                Locations may also have the following properties:



                location.key - A unique string representing this location (supported in
                createBrowserHistory and createMemoryHistory)




                It is used internally (e.g. in https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js to find locations in the current history stack) and should be treated as an implementation detail of react-router. I suspect a random key instead of a incrementing sequence number was simply the easiest way to implement unique ids (you don't have to store the current sequence number).







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered yesterday









                Johannes Reuter

                1,82979




                1,82979



























                     

                    draft saved


                    draft discarded















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237729%2fwhat-is-the-key-which-changes-on-every-route-change-with-connected-react-route%23new-answer', 'question_page');

                    );

                    Post as a guest














































































                    Popular posts from this blog

                    Top Tejano songwriter Luis Silva dead of heart attack at 64

                    ReactJS Fetched API data displays live - need Data displayed static

                    政党