The complete React Fullstack course

2_router_and_lifecycles

npm install react-router  --save
npm install react-router-dom --save

<BrowserRouter>
     <div>
        <header>
            <NavLink to="/">Home</NavLink><br/>
            <NavLink 
                to="/posts"
                activeStyle={{color:'red'}}
                activeClassName="selected"
            >Posts</NavLink><br/>
            <NavLink to={{
                pathname:'/profile'
            }}>Profile</NavLink><br/>
            <NavLink to="/life">Life</NavLink><br/>
            <NavLink to="/conditional">Conditional</NavLink><br/>
            <NavLink to="/user">User</NavLink><br/>
            <hr/>
        </header>
        <Switch>
            <Route path="/posts/:id/:username" component={PostItem}/>
            <Route path="/profile" component={Profile}/>
            <Route path="/posts" component={Posts}/>
            <Route path="/life" component={Life}/>
            <Route path="/conditional" component={Conditional}/>
            <Route path="/user" component={User}/>
            <Route path="/" exact component={Home}/>
        </Switch>
    </div>
</BrowserRouter>

// This also gets linted

/* eslint quotes: [2, "double"] */

function hello() {
    console.log("Hello, world!");
}
hello();

// This gets linted too
var div = <div className="jsx"></div>;

// And this
console.log(process.version);

This is plain text and doesn't get linted.