Should not use <Link> outside a <Router> Error - reactjs

Question

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

Answer 1

Your Link and Routes must all have a Router provider higher up in the tree. Also you must use a single BrowserRouter. You can change your configuration to the following
const Routers = () => (
<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>
);
class App extends Component {
render() {
return (
<div>
<Provider store={store}>
<BrowserRouter>
<div>
<Tab />
<Routers />
</div>
</BrowserRouter>
</Provider>
</div>
);
}
}

Answer 2

You don't have <BrowserRouter> parent for the link used in your tab.js file. Make following changes to your App.js file to make your code work:
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 (
<BrowserRouter>
<div>
<Tab />
<Routers />
</div>
</BrowserRouter />
);
}
}
export default App;

Answer 3

I think you should wrap in .
For details you can also refer to Key Concepts For React-Router and React-Router With Material-UI