React JS Application | Navigation Components| Part 2–30
Welcome back! We are going to be covering various component constructions that may be affected differently based on user authentication and the visibility of the component based on navigation and
We will first look at downloading the package that will make this process possible. Inside the terminal (on Mac use [coption + `] shortcut), paste this and execute.
$ npm install react-router-domNext, we will simply navigate to our root component and import some components that we will be using within our application.
in React the idea of being a single page application is that the HTML responses will readily be loaded upon the first request to the server creating a more responsive feel for clients.
Quickly, we will add Styling. First, we will work with root vs local CSS imports. Then we will import and use our component.
// EXAMPLE-FILE.jsimport "./styles.css";
import "path/styles.css";function ClassName() { // stmts <div className="CSS-CLASS"></div.>}
style.css file
/* style.css file */.CSS-CLASS {
// styles}
This tutorial is predicated on the assumption that you know css. I will do styling in a video. But I won't review the css here.
Setting Up Navigating
Now we will look at the root component (likely App.js). We could use this format to store the “pages/screens” of the application to be linked to the root of the app.
//App.jsimport "./styles.css";
import NavBar from "path/NavBar"
import Home from "path/Home"
import Record from "path/Record"
import Profile from "path/Profile"
import TabBar from "path/TabBar"function App() { <div className="app">
<NavBar />
<div className="content">
<Home />
<Record />
<Profile />
</div>
<TabBar />
</div>
}
However, we will still not be able to navigate, even with <a href=“/paths” > {children} </a> tags. We will need to download and link a new dependency called react-router-dom
$ npm install react-router-domGo to the package.json file and you should see it in the deps section as well. Now we will import them with restructuring and use them:
// App.jsimport "./styles.css";
import Home from "path/NavBar"
import Home from "path/Home"
import Record from "path/Record"
import Profile from "path/Profile"
import TabBar from "path/TabBar"
import {BrowserRouter as Router, Route, Swtich} from "path/react-router-dom"function App() {<Router />
<div className="app"> <NavBar />
<div className="content"> <Swtich />
<Route path="/" exact /> <Home /> </Route>
<Route path="/Record" /> <Record /> </Route>
<Route path="/Profile" /> <Profile /> </Route>
<Swtich /> </div>
<TabBar /> </div>
</Router>}
Step One
So we import the React Router Dom components using destructuring, which allows us to use specific components making the app lighter on load time.
Step Two
We are enclosing the total application within the BrowseRouter tag (<Route / > as we casted it as Router).
Step Three
Next, we are placing all the pages that will change within the <Switch> Component.
Step Four
We will use the <Route path=“/path” exact=“false”/> {ReactCompont} </Route>tag with its respected arguments (props).
The path will be the URL path key assigned the value which in this instance points to the React Component we created (Home, profile, etc).
Navigating To Pages
Now that we have the navigation infrastructure sorted, we can link out navigation with user-based click events to create click-based navigation, replacing the HTML <a> tags.
// NavBar.jsimport { Link } from "path/react-router-dom"const NavBar() {return (
<nav className="nav-bar">
<Link to="/"></ Link>
<Link to="/Profile"></ Link></nav>}export default NavBar;
Using the <Link> tag destructured from the react-router-dom dependency.
Conditional Links
Consider that we are looking to create conditional links. We may only want to display certain links based on the author's authorization or the purpose of the page.
So now we will create <SignedInLinks> and <SingedOutLink> components.
// SignedInLinks.jsimport {Link} from "path/react-router-dom"const SignedInLinks() { return (
<li><NavLink to="/">New Recipe</NavLink></li>
<li><NavLink to="/">LogOut</NavLink></li>
<li><NavLink to="/">AM</NavLink></li>
)
}export default SignedInLinks;
Now we will import the link:
// NavBar.jsimport {Link} from "path/react-router-dom"const NavBar() {return (
<nav className="nav-bar">
<Link to="/">Logo</Link>
<SignedinLinks />
</nav>
)
}export default NavBar;
Now we will create the unauthorized (conditional links):
// SignedOutLinks.jsimport {Link} from "path/react-router-dom"const SignedOutLinks() { return (
<li><NavLink to="/">Sign In</NavLink></li>
<li><NavLink to="/">Sign Up</NavLink></li>
)
}export default SignedOutLinks;
Now we will import the links again:
// NavBar.jsimport {Link} from "path/react-router-dom"
import SignedInLinks from "path/SignedInLinks"
import SignedOutLinks from "path/SignedOutLinks"const NavBar() {return (
<nav className="nav-bar">
<Link to="/">Logo</Link>
<SignedInLinks />
<SignedOutLinks />
</nav>
)
}export default NavBar;
Since it's in the main App you should run with the nav minus styling. It should display all the links at once since we have not conditionally formatted the links to toggle based on the user authentication, yet.
