title: Using React Router to load components You should not use <Link> outside a <Router>
body: <p>Hi I am using React Router to load components. It keeps giving me an error saying </p>
  
  <blockquote>
    <p>You should not use <code>&lt;Link&gt;</code> outside a <code>&lt;Router&gt;</code></p>
  </blockquote>
  
  <p>When the user first goes to the page, I want them to go to the login page. After the login is successful and the homepage loads, I have a Navbar component on the homepage. How can I nest the routes? I am having trouble please help.</p>
  
  <p>app.js </p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  
  import Navbar from "./components/Navbar";
  import Landing from "./components/Landing";
  import Login from "./components/Login";
  import Register from "./components/Register";
  import Course from "./components/AddCourse";
  import Homepage from "./components/Homepage";
  import AddCourse from "./components/AddCourse";
  import SearchCourse from "./components/SearchCourse";
  import SearchItem from "./components/SearchItem";
  import Profile from "./components/Profile";
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Route path="/login" component={Login} exact={true} /&gt;
            &lt;Route path="/register" component={Register} exact={true} /&gt;
            &lt;div&gt;
              &lt;Switch&gt;
                &lt;Route path="/homepage" component={Homepage} exact={true} /&gt;
                &lt;Route path="/" component={SearchCourse} exact={true} /&gt;
                &lt;Route path="/profile" component={Profile} exact={true} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>navbar </p>
  
  <pre><code>import React, { Component } from "react";
  import jwt_decode from "jwt-decode";
  import { Link, withRouter } from "react-router-dom";
  
  class Navbar extends Component {
    constructor() {
      super();
      this.state = {
        name: "",
        email: ""
      };
    }
    componentDidMount() {
      const token = localStorage.usertoken;
      const decoded = jwt_decode(token);
      this.setState({
        name: decoded.name,
        email: decoded.email
      });
    }
    logOut(event) {
      event.preventDefault();
      localStorage.removeItem("usertoken");
      this.props.history.push("/");
    }
    render() {
      return (
        &lt;ul style={navBarStyle} id="sidenav-1" className="sidenav sidenav-fixed"&gt;
          &lt;li&gt;
            &lt;img style={imageStyle} src="" alt="Avatar" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to="/profile"&gt;
              &lt;i style={linkStyle} class="material-icons "&gt;
                person
              &lt;/i&gt;
            &lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="https://twitter.com/MaterializeCSS" target="_blank"&gt;
              &lt;i style={linkStyle} class="material-icons "&gt;
                book
              &lt;/i&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to="/searchCourses"&gt;
              &lt;i style={linkStyle} class="material-icons"&gt;
                search
              &lt;/i&gt;
            &lt;/Link&gt;
          &lt;/li&gt;
          &lt;li style={linkStyle}&gt;
            &lt;a href="" onClick={this.logOut.bind(this)}&gt;
              &lt;i style={linkStyles} class="fas fa-sign-out-alt" /&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      );
    }
  }
  </code></pre>
  
  <p>homepage</p>
  
  <pre><code>import React, { Component } from "react";
  import { Link, withRouter } from "react-router-dom";
  import jwt_decode from "jwt-decode";
  
  import Navbar from "./Navbar";
  import CourseItem from "./CourseItem";
  
  class Homepage extends Component {
    componentDidMount() {
      document.title = "Dashboard";
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Navbar /&gt;
          &lt;div className="container"&gt;
            &lt;div&gt;
              &lt;h3&gt;Dashboard&lt;/h3&gt;
              &lt;hr /&gt;
            &lt;/div&gt;
            &lt;div className="col" /&gt;
            {/* {this.props.children} */}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Homepage;
  </code></pre>