"You should not use <Link> outside a <Router>" Issue in Nested Routes

user_13643672 0
Viewed 178

I've seen a similar question, but I unfortunately still have a bug in my code that I cannot seem to solve :(

My react-router-dom version is 5.2.0, and my react version 17.0.2.

I'm in the process of building a more complex React app, but I'm also able to replicate the bug with the simple code below. I've basically stripped everything out of the application except a <Test /> component.

Here's my App.js file, where I'm employing React-Router and have a single route for '/test'. At that route, I'm rendering my <Test /> component, then also using React-Router's <Link /> component. This works perfectly fine! Code below for both my App.js and Test.js files is below.

App.js:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';

const App = () => (
    <Router>
        <Switch>
            <Route exact path='/test'>
                <Test />
                <Link to='/' className='text-white'>
                    Go back home
                </Link>
            </Route>
        </Switch>
    </Router>
);

export default App;

Test.js

import React from 'react';

const Test = () => {
    return (
        <>
            <h1 className='text-white'>Hello, world</h1>
        </>
    );
};

export default Test;

My bug occurs when I try to bring Link from react-router-dom into my <Test /> component. For example, I'm trying to do this:

Test.js

import React from 'react';
import { Link } from 'react-router-dom';

const Test = () => {
    return (
        <>
            <h1 className='text-white'>Hello, world</h1>
            <Link to='/' className='text-white'>
                Go back home
            </Link> 
        </>
    );
};

export default Test;

But whenever I visit /test (i.e. http://localhost:3000/test), my application breaks and I see "Error: Invariant failed: You should not use Link outside a Router." Screenshot below:

enter image description here

I thought I had found an answer here, but I don't understand what it means to import or export from my bundle.

Any and all help is greatly appreciated! This has been a huge roadblock in my application as I'm trying to use React-Router's <Link /> component inside of other components rendered within the <Switch />.

react-router reactjs javascript
2 Answers

Try to put this in the Route prop render:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';

const App = () => (
   <Router>
      <Switch>
        <Route
          exact
          path="/test"
          render={() => ( // look at this
            <>
              <Test />
              <Link to="/" className="text-white">
                Go back home
              </Link>
            </>
          )}
        />
      </Switch>
    </Router>
);

export default App;

user_161325400

I was able to fix the bug by just deleting my node_modules directory and then re-installing all of the required packages with npm install! The nested <Link /> component now works as expected.

user_136436720
Related