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 Nov 10 at 9:44









      Lazar Ljubenović

      9,05942451




      9,05942451
























          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',
            autoActivateHeartbeat: false,
            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















            Required, but never shown

























            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 Nov 11 at 14:06









                Johannes Reuter

                1,944811




                1,944811






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    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















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    這個網誌中的熱門文章

                    Xamarin.form Move up view when keyboard appear

                    Post-Redirect-Get with Spring WebFlux and Thymeleaf

                    Anylogic : not able to use stopDelay()