How to use React Link deep inside of a Router-wrapped app?2019 Community Moderator ElectionLoop inside React JSXReact router app - Route titleReact-router urls don't work when refreshing or writing manuallyProgrammatically navigate using react routerReact-Router with React 13.3+React Router with React v0.14.3react-router createElement and render failReact Router Invariant Violation test fails with <Link> outside <Router>Testing components that contain react router Link with EnzymeExt-react breaks React Router <Link> and <Route> components

Why is there an extra space when I type "ls" on the Desktop?

Why won't the strings command stop?

Named nets not connected in Eagle board design

How do we objectively assess if a dialogue sounds unnatural or cringy?

Can a Mexican citizen living in US under DACA drive to Canada?

Preparing as much as possible of a cake in advance

I can't die. Who am I?

3.5% Interest Student Loan or use all of my savings on Tuition?

Was it really inappropriate to write a pull request for the company I interviewed with?

Is being socially reclusive okay for a graduate student?

Why do phishing e-mails use faked e-mail addresses instead of the real one?

In the world of The Matrix, what is "popping"?

Does the in-code argument passing conventions used on PDP-11's have a name?

Why would the IRS ask for birth certificates or even audit a small tax return?

How spaceships determine each other's mass in space?

Replacing tantalum capacitor with ceramic capacitor for Op Amps

What can I do if someone tampers with my SSH public key?

I've given my players a lot of magic items. Is it reasonable for me to give them harder encounters?

How to make sure I'm assertive enough in contact with subordinates?

What is the purpose of a disclaimer like "this is not legal advice"?

The past tense for the quoting particle って

An Undercover Army

What is the oldest European royal house?

Is every open circuit a capacitor?



How to use React Link deep inside of a Router-wrapped app?



2019 Community Moderator ElectionLoop inside React JSXReact router app - Route titleReact-router urls don't work when refreshing or writing manuallyProgrammatically navigate using react routerReact-Router with React 13.3+React Router with React v0.14.3react-router createElement and render failReact Router Invariant Violation test fails with <Link> outside <Router>Testing components that contain react router Link with EnzymeExt-react breaks React Router <Link> and <Route> components










0















At a high level, my app is structured like this:



<Provider>
<ConnectedRouter>
<App>
<PageContainer>
<Page>
<Link>


The problem is, when I try to run - I get the "Uncaught Invariant Violation: You should not use Link outside a Router" error. I've tried wrapping <Link> inside of another Router inside <Page> but that seems to create another instance of a router and navigation does not register properly. Probably because initially history is created at the top level and passed the the Router there, and that same history object is not passed to the Router inside the Page.



First, I'm confused why I'm getting the error - since the Link is inside the router, albeit not a direct child of.



Second, if I absolutely need to wrap the link in a Router, how can I make sure that it's the same exact Router instance? Or is that even an OK pattern - to have <ConnectedRouter> appear on different levels of the app, and multiple times?



Help, please!










share|improve this question
























  • There's no ConnectedRouter in react-router, the problem is likely specific to it. Is it github.com/supasate/connected-react-router ? The error possibly means that ConnectedRouter doesn't use the same react-router instance as Link.

    – estus
    yesterday











  • Yes, that's indeed the reason. I am trying to figure out how to get the same instance.

    – antonpug
    yesterday











  • Please, provide stackoverflow.com/help/mcve that can replicate the problem - Stackblitz or else. Try to run npm dedupe as potential fix.

    – estus
    yesterday















0















At a high level, my app is structured like this:



<Provider>
<ConnectedRouter>
<App>
<PageContainer>
<Page>
<Link>


The problem is, when I try to run - I get the "Uncaught Invariant Violation: You should not use Link outside a Router" error. I've tried wrapping <Link> inside of another Router inside <Page> but that seems to create another instance of a router and navigation does not register properly. Probably because initially history is created at the top level and passed the the Router there, and that same history object is not passed to the Router inside the Page.



First, I'm confused why I'm getting the error - since the Link is inside the router, albeit not a direct child of.



Second, if I absolutely need to wrap the link in a Router, how can I make sure that it's the same exact Router instance? Or is that even an OK pattern - to have <ConnectedRouter> appear on different levels of the app, and multiple times?



Help, please!










share|improve this question
























  • There's no ConnectedRouter in react-router, the problem is likely specific to it. Is it github.com/supasate/connected-react-router ? The error possibly means that ConnectedRouter doesn't use the same react-router instance as Link.

    – estus
    yesterday











  • Yes, that's indeed the reason. I am trying to figure out how to get the same instance.

    – antonpug
    yesterday











  • Please, provide stackoverflow.com/help/mcve that can replicate the problem - Stackblitz or else. Try to run npm dedupe as potential fix.

    – estus
    yesterday













0












0








0








At a high level, my app is structured like this:



<Provider>
<ConnectedRouter>
<App>
<PageContainer>
<Page>
<Link>


The problem is, when I try to run - I get the "Uncaught Invariant Violation: You should not use Link outside a Router" error. I've tried wrapping <Link> inside of another Router inside <Page> but that seems to create another instance of a router and navigation does not register properly. Probably because initially history is created at the top level and passed the the Router there, and that same history object is not passed to the Router inside the Page.



First, I'm confused why I'm getting the error - since the Link is inside the router, albeit not a direct child of.



Second, if I absolutely need to wrap the link in a Router, how can I make sure that it's the same exact Router instance? Or is that even an OK pattern - to have <ConnectedRouter> appear on different levels of the app, and multiple times?



Help, please!










share|improve this question
















At a high level, my app is structured like this:



<Provider>
<ConnectedRouter>
<App>
<PageContainer>
<Page>
<Link>


The problem is, when I try to run - I get the "Uncaught Invariant Violation: You should not use Link outside a Router" error. I've tried wrapping <Link> inside of another Router inside <Page> but that seems to create another instance of a router and navigation does not register properly. Probably because initially history is created at the top level and passed the the Router there, and that same history object is not passed to the Router inside the Page.



First, I'm confused why I'm getting the error - since the Link is inside the router, albeit not a direct child of.



Second, if I absolutely need to wrap the link in a Router, how can I make sure that it's the same exact Router instance? Or is that even an OK pattern - to have <ConnectedRouter> appear on different levels of the app, and multiple times?



Help, please!







reactjs react-router






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited yesterday







antonpug

















asked yesterday









antonpugantonpug

4,6752566108




4,6752566108












  • There's no ConnectedRouter in react-router, the problem is likely specific to it. Is it github.com/supasate/connected-react-router ? The error possibly means that ConnectedRouter doesn't use the same react-router instance as Link.

    – estus
    yesterday











  • Yes, that's indeed the reason. I am trying to figure out how to get the same instance.

    – antonpug
    yesterday











  • Please, provide stackoverflow.com/help/mcve that can replicate the problem - Stackblitz or else. Try to run npm dedupe as potential fix.

    – estus
    yesterday

















  • There's no ConnectedRouter in react-router, the problem is likely specific to it. Is it github.com/supasate/connected-react-router ? The error possibly means that ConnectedRouter doesn't use the same react-router instance as Link.

    – estus
    yesterday











  • Yes, that's indeed the reason. I am trying to figure out how to get the same instance.

    – antonpug
    yesterday











  • Please, provide stackoverflow.com/help/mcve that can replicate the problem - Stackblitz or else. Try to run npm dedupe as potential fix.

    – estus
    yesterday
















There's no ConnectedRouter in react-router, the problem is likely specific to it. Is it github.com/supasate/connected-react-router ? The error possibly means that ConnectedRouter doesn't use the same react-router instance as Link.

– estus
yesterday





There's no ConnectedRouter in react-router, the problem is likely specific to it. Is it github.com/supasate/connected-react-router ? The error possibly means that ConnectedRouter doesn't use the same react-router instance as Link.

– estus
yesterday













Yes, that's indeed the reason. I am trying to figure out how to get the same instance.

– antonpug
yesterday





Yes, that's indeed the reason. I am trying to figure out how to get the same instance.

– antonpug
yesterday













Please, provide stackoverflow.com/help/mcve that can replicate the problem - Stackblitz or else. Try to run npm dedupe as potential fix.

– estus
yesterday





Please, provide stackoverflow.com/help/mcve that can replicate the problem - Stackblitz or else. Try to run npm dedupe as potential fix.

– estus
yesterday












0






active

oldest

votes











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%2f55023105%2fhow-to-use-react-link-deep-inside-of-a-router-wrapped-app%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes















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.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55023105%2fhow-to-use-react-link-deep-inside-of-a-router-wrapped-app%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







Popular posts from this blog

Thal And Out Agency railway station See also References External links Navigation menuOfficial Web Site of Pakistan RailwaysArchivedOfficial Web Site of Pakistan Railwayseeexpanding ite

Understanding generators in Python2019 Community Moderator ElectionGenerator function not working pythonFor loop not executing two timesGenerators - Printing generated valuesWhy can a python generator only be used once?What exactly do generators do?What does the “yield” keyword do?What does “list comprehension” mean? How does it work and how can I use it?sklearn Kfold acces single fold instead of for loopIs a generator the callable? Which is the generator?Apply Border To Range Of Cells Using OpenpyxlCalling an external command in PythonWhat are metaclasses in Python?What is the difference between @staticmethod and @classmethod?Finding the index of an item given a list containing it in PythonDifference between append vs. extend list methods in PythonHow can I safely create a nested directory in Python?Does Python have a ternary conditional operator?Understanding slice notationUnderstanding Python super() with __init__() methodsDoes Python have a string 'contains' substring method?

How can I change the color of pagination dots of UIPageControl?How to change UIPageControl dotsIs there a way to change page indicator dots colorCustomize dot with image of UIPageControl at index 0 of UIPageControlNo visible @interface for 'NSObject<PageControlDelegate>' declares the selector 'pageControlPageDidChange:'How to change the color of pagination dots in UIPageControl with a different color per pagepagecontrol indicator custom image instead of DefaultChanging the colour of UIPageControl dots in MonoTouchpagecontrol selectable page visibility color?Alternative way to load ViewControllers on a UIPageControlHow to set only layer.border-color for UIpage control dots in swiftHow can I develop for iPhone using a Windows development machine?How to change the name of an iOS app?UITableView - change section header coloruipagecontrol indicator(dot)issueCustom UIPageControl dots color not changingchange the interspace between UIPageControl dotsHow to change Status Bar text color in iOSHow can I change image tintColor in iOS and WatchKitUIPageControl dots with larger space in between each dotsHow to change the color of pagination dots in UIPageControl with a different color per page