You should not use Link outside a Router using react-router-dom

Question

I am trying to do routing using react-router-dom. I got an error like you should not use outside the like this.Here below i am attaching my code please check.

index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import App from './containers/App';




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

App.js

import React from 'react';
import Dropdown from './dropdown';
import './styles.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Addatttemp from './Addatttemp';

const options = [
    {label: 'One' },
    {label: 'Two'},
    {label: 'Three'},
    {label: 'Four' }
]
const AgentValues=[
    {label: 'Add Att/temp', value:'Addatttemp' },
    {label: 'Mod prof LVL',value:'Modproflvl'},
    {label: 'Override Attr',value:'Overrideattr'},
    {label: 'Temp',value:'temp'}
]
const defaultOption = options[0]
export default class App extends React.Component {
    constructor (props) {
        super(props)
    }
    render() {
        return (
            <div>
                <div className="navbar">
                    <div className="align">
                        <div className="dropdown">
                            <Dropdown options={AgentValues} name='Agent'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Templete'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Report'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Search'/>
                        </div>
                    </div>
                </div>
                <Router>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/Agent/Addatttemp' component={Addatttemp} />
                </Switch>
            </Router>
            </div>
        );
    }
}

Dropdown.js

import React, { Component, PropTypes } from "react";
import { Link } from 'react-router-dom';

class dropdown extends Component {
    constructor (props) {
        super(props)
    }
    render(){
        var dropdownList = []
        this.props.options.map((res)=>{
            dropdownList.push(<Link to={'/'}>{res.label}</Link>)
        })
        return(
            <div>
                <button className="dropbtn"><Link to={'/'}>{this.props.name}</Link>
                </button>
                <div className="dropdown-content">
                    {dropdownList}
                </div>
            </div>
        )
    }
}


export default dropdown;

Home.js

import React from 'react'

const Home = () => (
    <div>
        <h1>Welcome to the Tornadoes Website!</h1>
    </div>
)

export default Home

Addatttemp.js

import React from 'react'

const AddTemp = () => (
    <div>
        <h1>Welcome to the Add att/temp!</h1>
    </div>
)

export default AddTemp

Like this i wrote my code, but when i run this code it throws me the error like Uncaught Error: You should not use Link outside a Router . I am unable to resolve this, please give me suggestions that what i did wrong in it, Any help much appreciated.

Answer 1

As the error message says you are not having Router up the component tree.

You could use it in App component like this

export default class App extends React.Component {
    render() {
        return (
            <Router>
              <div>
            <div className="navbar">
                <div className="align">
                    <div className="dropdown">
                        <Dropdown options={AgentValues} name='Agent'/>
                    </div>
                    <div className="dropdown">
                        <Dropdown options={options} name='Templete'/>
                    </div>
                    <div className="dropdown">
                        <Dropdown options={options} name='Report'/>
                    </div>
                    <div className="dropdown">
                        <Dropdown options={options} name='Search'/>
                    </div>
                </div>
            </div>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route exact path='/Agent/Addatttemp' component={Addatttemp} />
            </Switch>
            </div>
          </Router>
        );
    }
}

Also

You don't need constructor that just calls super

// this is noop
constructor (props) {
    super(props)
}

You don't need to push to external array when using map.

var dropdownList = this.props.options.map(res => (
   <Link to={'/'}>{res.label}</Link>
))

Answer 2

If you are trying to show a Link on a page or any element outside of BrowserRouter you are going to get this error. This error message is saying that any component that is not a child of a router cannot contain any react-router-dom related components.

What you need to learn for effective development in React is your component hierarchy.

In your case your parent component, the one at the top of the hierarchy is App, how do I know? because you said so right here in your index.js file:

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

So, when working with react-router-dom, next up on that hierarchy chart should be your BrowserRouter. This is where you start to lose me and React as we are both looking for BrowserRouter inside your App component and do not see it.

This is what we should be seeing right now:

const App = () => {
  return (
    <div className="ui container">
      <BrowserRouter>
        <div>
          <Route path="/" exact component={Home} />
          <Route path="/Agent/Addatttemp" exact component={Addattemp} />
        </div>
      </BrowserRouter>
    </div>
  );
};

Notice I am using the exact keyword? I am using the exact keyword so I don’t accidentally match one of these other routes I am about to implement.

So please go ahead and add your BrowserRouter or in your case, your Router which is acting as BrowserRouter higher up on that hierarchy below App, it has to be next up in the hierarchy, everything else is a child of that BrowserRouter and must go within it.

And since you are never going to make use of the Link from react-router-dom inside your App component, go ahead and clean it up like so:

import { BrowserRouter, Route } from "react-router-dom";

Once you follow the above, that error should go away.