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

Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme