I am trying to navigate through different screens with BottomNavigationAction from material ui and i get this error `You should not use <Link> outside a <Router>` 

Tab.js:

```
import React from 'react';
import { Link } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';

// icons
import HomeIcon from '@material-ui/icons/Home';
import DashboardIcon from '@material-ui/icons/Dashboard';
import PaymentIcon from '@material-ui/icons/Payment';
import FaceIcon from '@material-ui/icons/Face';
import AtmIcon from '@material-ui/icons/Atm';

const styles = {
  root: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    cursor: 'pointer'
  },
  wrapper: {
    minWidth: '0px'
  }
};

class Tab extends React.Component {
  state = { value: 0 };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div>
        <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
          <Link to="/">
            <BottomNavigationAction label="Home" value="home" icon={<HomeIcon />} className={classes.wrapper}/>
          </Link>
        </BottomNavigation>
      </div>
    );
  }
}

export default withStyles(styles)(Tab);

```

app.js is where i am trying to render the Tab.js so it stays on all the pages! and my routes are also rendered there

App.js

```
import React, { Component } from 'react';

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

import Routers from './Routers';
import Tab from './components/Tab';

class App extends Component {
  render() {
    return (
      <div>
        <Tab />
        <Routers />
      </div>
    );
  }
}

export default App;

```

routes.js is where i identify routes:

Routes.js

```
import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import { Provider } from 'react-redux';

import Home from './components/Home';
import Profile from './components/Profile';
import Login from './components/auth/Login';
import reducers from './reducers';

import configureStore from './store/configueStore';
import {getAuthToken} from './actions/auth';

const store = configureStore();

const Routers = () => (
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Switch>
          <Route path='/' component={Home} exact={true}/>
          <Route path='/login' component={Login} exact={true}/>
          <Route path='/register' component={Login} exact={true}/>
          <Route path='/profile' component={Profile} exact={true}/>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
);

export default Routers;

```

`how to i use link in my Tab.js file and make the redirection happen
and i will love an explanation on why this problem is accruing and how will i be able to fix it with my current file structure.`
And is my file structure good? as i am having a different file for my routes and rendering it inside my app.js