You should not use outside a

Question

I'm trying to set up react-router in an example application, and I'm getting the following error:

You should not use <Link> outside a <Router>

My app is set up like so:

Parent component

const router = (
  <div className="sans-serif">
    <Router histpry={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRoute component={PhotoGrid}></IndexRoute>
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </div>
);

render(<Main />, document.getElementById('root'));

Child/`Main` component

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

Any idea what I'm doing wrong here?

Here's a Sandbox link to demonstrate the problem.

Kindly mention which version you are using of `react-router`, Because you are using different approaches for the Index Routing. — Haider Ali Anjum, Feb 06 '18 at 10:37
I got this message due to a failure of hot reloading after updating some app dependencies. A manual quit and restart of the development server solved the issue. Just FYI in case someone else has the message pop up out of nowhere. — ballenf, May 06 '19 at 19:07

MBehtemam · Answer 1 · 2020-04-19T21:43:06.090

149

For JEST users

if you use Jest for testing and this error happen just wrap your component with <BrowserRouter>

describe('Test suits for MyComponentWithLink', () => {
it('should match with snapshot', () => {
const tree = renderer
  .create(
    <BrowserRouter>
      <MyComponentWithLink/>
    </BrowserRouter>
  )
  .toJSON();
 expect(tree).toMatchSnapshot();
 });
});

edited Apr 19 '20 at 21:43

answered Feb 04 '19 at 15:40

MBehtemam

7,865
15
66
108

8

This answer uses `react-test-renderer`, which is not built in for create-react-app. If you use the built in `@testing-library/react`, use `render();` instead. – Timmy Chan Sep 23 '20 at 20:43
3

Wrap it in `` instead of `` because `` is lighter weight. – user1894919 Jan 19 '21 at 13:05
A savior if the day! – Neurotransmitter Jan 28 '22 at 11:07

score 72 · Accepted Answer · edited May 24 '18 at 18:17

I'm assuming that you are using React-Router V4, as you used the same in the original Sandbox Link.

You are rendering the Main component in the call to ReactDOM.render that renders a Link and Main component is outside of Router, that's why it is throwing the error:

You should not use <Link> outside a <Router>

Changes:

Use any one of these Routers, BrowserRouter/HashRouter etc..., because you are using React-Router V4.
Router can have only one child, so wrap all the routes in a div or Switch.
React-Router V4, doesn't have the concept of nested routes, if you wants to use nested routes then define those routes directly inside that component.

Check this working example with each of these changes.

Parent Component:

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Route path="/" component={Main} />
      <Route path="/view/:postId" component={Single} />
    </div>
  </BrowserRouter>
);

render(<App />, document.getElementById('root'));

`Main` component from route

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

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

Etc.

Also check this answer: Nested routes with react router v4

score 22 · Answer 3 · answered Dec 29 '18 at 09:44

22

Enclose Link component inside BrowserRouter component

 export default () => (
  <div>
   <h1>
      <BrowserRouter>
        <Link to="/">Redux example</Link>
      </BrowserRouter>
    </h1>
  </div>
)

answered Dec 29 '18 at 09:44

Basavaraj Hadimani

1,094
12
21

score 17 · Answer 4 · answered Feb 04 '19 at 04:21

Whenever you try to show a Link on a page thats outside the BrowserRouter you will get that error.

This error message is essentially saying that any component that is not a child of our <Router> cannot contain any React Router related components.

You need to migrate your component hierarchy to how you see it in the first answer above. For anyone else reviewing this post who may need to look at more examples.

Let's say you have a Header.jscomponent that looks like this:

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

const Header = () => {
    return (
        <div className="ui secondary pointing menu">
            <Link to="/" className="item">
                Streamy
            </Link>
            <div className="right menu">
                <Link to="/" className="item">
                    All Streams
                </Link>
            </div>
        </div>
    );
};

export default Header;

And your App.js file looks like this:

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import StreamCreate from './streams/StreamCreate';
import StreamEdit from './streams/StreamEdit';
import StreamDelete from './streams/StreamDelete';
import StreamList from './streams/StreamList';
import StreamShow from './streams/StreamShow';
import Header from './Header';

const App = () => {
  return (
    <div className="ui container">
      <Header />
      <BrowserRouter>
        <div>
        <Route path="/" exact component={StreamList} />
        <Route path="/streams/new" exact component={StreamCreate} />
        <Route path="/streams/edit" exact component={StreamEdit} />
        <Route path="/streams/delete" exact component={StreamDelete} />
        <Route path="/streams/show" exact component={StreamShow} />
        </div> 
      </BrowserRouter>
    </div>
  );
};

export default App;

Notice that the Header.js component is making use of the Link tag from react-router-dom but the componet was placed outside the <BrowserRouter>, this will lead to the same error as the one experience by the OP. In this case, you can make the correction in one move:

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import StreamCreate from './streams/StreamCreate';
import StreamEdit from './streams/StreamEdit';
import StreamDelete from './streams/StreamDelete';
import StreamList from './streams/StreamList';
import StreamShow from './streams/StreamShow';
import Header from './Header';

const App = () => {
  return (
    <div className="ui container">
      <BrowserRouter>
        <div>
        <Header />
        <Route path="/" exact component={StreamList} />
        <Route path="/streams/new" exact component={StreamCreate} />
        <Route path="/streams/edit" exact component={StreamEdit} />
        <Route path="/streams/delete" exact component={StreamDelete} />
        <Route path="/streams/show" exact component={StreamShow} />
        </div> 
      </BrowserRouter>
    </div>
  );
};

export default App;

Please review carefully and ensure you have the <Header /> or whatever your component may be inside of not only the <BrowserRouter> but also inside of the <div>, otherwise you will also get the error that a Router may only have one child which is referring to the <div> which is the child of <BrowserRouter>. Everything else such as Route and components must go within it in the hierarchy.

So now the <Header /> is a child of the <BrowserRouter> within the <div> tags and it can successfully make use of the Link element.

score 5 · Answer 5 · answered Aug 23 '19 at 20:28

5

Make it simple:

render(<BrowserRouter><Main /></BrowserRouter>, document.getElementById('root'));

and don't forget: import { BrowserRouter } from "react-router-dom";

answered Aug 23 '19 at 20:28

Ivan Carrasco Quiroz

387
8
8

score 4 · Answer 6 · answered Oct 09 '19 at 21:33

4

I was getting this error because I was importing a reusable component from an npm library and the versions of react-router-dom did not match.

So make sure you use the same version in both places!

answered Oct 09 '19 at 21:33

vaskort

2,591
2
20
29

In my case I was using pnpm to develop a library and a sample app in the same repo. Both projects have their own package.json but webpack sees two different libraries. The solution is to link them: ` "react-router-dom": "link:../main/node_modules/react-router-dom",` so that both library and application are using the same react router. – jmlopez Oct 20 '21 at 21:28

score 3 · Answer 7 · edited Aug 24 '18 at 18:12

I kinda come up with this code :

import React from 'react';
import { render } from 'react-dom';

// import componentns
import Main from './components/Main';
import PhotoGrid from './components/PhotoGrid';
import Single from './components/Single';

// import react router
import { Router, Route, IndexRoute, BrowserRouter, browserHistory} from 'react-router-dom'

class MainComponent extends React.Component {
  render() {
    return (
      <div>
        <BrowserRouter history={browserHistory}>
          <Route path="/" component={Main} >
            <IndexRoute component={PhotoGrid}></IndexRoute>
            <Route path="/view/:postId" component={Single}></Route>
          </Route>
        </BrowserRouter>
      </div>
    );
  }
}

render(<MainComponent />, document.getElementById('root'));

I think the error was because you were rendering the Main component, and the Main component didn't know anything about Router, so you have to render its father component.

score 2 · Answer 8 · answered Nov 12 '21 at 23:29

add this to your index.js:

import { BrowserRouter as Router } from "react-router-dom";

and then wrap your <App /> within the <Router></Router> to use links within your react application.

like this:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

ReactDOM.render(
    <Router>
        <App/>
    </Router>, 
    document.getElementById('root'));

score 1 · Answer 9 · answered Aug 08 '21 at 03:29

Why not try to create another component that just uses the BrowserRouter from "react-router-dom" and wrap your component with the Link inside it.

const ReduxExample () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

then you can do this

const NewReduxExample = () => {
   <BrowserRouter>
     <ReduxExample />
   </BrowserRouter>
};

score 1 · Answer 10 · answered Sep 23 '21 at 17:05

Alternatively, you can do this in your index.js file in your src folder.

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom';

import App from './App';

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Then in your Component.jsx file you can import Link

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

and use the Link like so without a Router/Route tag.

<Link to="/">Page</Link>

score 1 · Answer 11 · answered Oct 08 '21 at 23:59

wrap every component inside BrowserRouter where you're calling reactDom.render like this

import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(

  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

score 0 · Answer 12 · answered Mar 21 '18 at 05:45

0

Write router in place of Main in render (last line in the code). Like this ReactDOM.render(router, document.getElementById('root'));

answered Mar 21 '18 at 05:45

Prakhar Mittal

6,315
1
14
31

score 0 · Answer 13 · edited Dec 19 '21 at 19:28

0

You can put the Link component inside the Router componet. Something like this:

 <Router>
     <Route path='/complete-profiles' component={Profiles} />
     <Link to='/complete-profiles'>
         <div>Completed Profiles</div>
     </Link>
 </Router>

edited Dec 19 '21 at 19:28

MBehtemam

7,865
15
66
108

answered Apr 14 '20 at 20:38

Laveena

97
1
10

score 0 · Answer 14 · answered May 14 '21 at 16:10

I base my answer on this article. Here's a simple solution.

// index.test.tsx
import React from "react";
import { render, screen } from "@testing-library/react";
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
import Login from ".";

it("should display Login", () => {
  const history = createBrowserHistory();
  render(
    <Router history={history}>
      <Login />
    </Router>
  );
  const linkElement = screen.getByText(/Login/i);
  expect(linkElement).toBeInTheDocument();
});

score 0 · Answer 15 · answered Sep 22 '21 at 18:01

Here is my solution, I use react testing library that comes with create-react-app. I know is simpler solution to what you asked, but I was missing the imports in the other answers so I just put it altogether. Here is the test file:

// HomePage.test.js 
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import HomePage from './HomePage';

it('Homepage contains heading 1', () => {
  render(
    <BrowserRouter>
      <HomePage />
    </BrowserRouter>
  );

  screen.getByRole('heading', { level: 1 });
});

it('Homepage contains link', () => {
  render(
    <BrowserRouter>
      <HomePage />
    </BrowserRouter>
  );

  expect(screen.getByRole('link')).toHaveAttribute('href', '/articles');
});

The main component that I would be testing would look like this

// HomePage.js
import React from 'react';
import { Link } from 'react-router-dom';

const HomePage = () => {
  return (
    <>
      <h1>Welcome to React page</h1>
      <p>
        Click on <Link to='/articles'>Articles</Link> to see what is shared
        today
      </p>
    </>
  );
};

export default HomePage;

score -12 · Answer 16 · answered Feb 06 '18 at 10:31

-12

If you don't want to change much, use below code inside onClick()method.

this.props.history.push('/');

answered Feb 06 '18 at 10:31

PRADEEP YADAV

17

You should not use outside a

Parent component

Child/`Main` component

16 Answers16

Parent Component:

`Main` component from route

Linked

Related

You should not use outside a

Parent component

Child/Main component

16 Answers16

Parent Component:

Main component from route

Linked

Related

Child/`Main` component

`Main` component from route