This content originally appeared on DEV Community and was authored by ayubf
Have you ever created a React app and wondered what it would take to add routes? Have, let's say, a seperate
page for your posts and pictures? Routes are a basic concept in web development and are necessary for any web development framework, frontend or backend. This is especially essential for RESTful APIs that take advantage of the ability for routes to output different pages, carry out different functions like logging in, logging out, etc. In this article I'll show you how to set up routes in React with a library called React Router.
Before you can start you should make sure you have the proper packages and tools installed.
Node & NPM
Node is the environment that runs JavaScript frameworks and libraries like React and is essential for projects like these. NPM is the package manager for Node, and that basically means NPM installs the required files to use React and other libraries. We will use it later in this article to install libraries.
Text Editor
To put it simply, a text editor is just the application on your computer that will edit the text files to create the React app. My personal choice is one called VSCode, but there are other good options like Sublime Text, Notepad++, & Atom, but even your default text editor can get the job done.
Step 1: Creating React App
To initiate the React app we'll use a tool that's gonna make the process much simpler. Run the command below to create the React app.
npx create-react-app reactrouterapp
npx is a package bundled with npm and is used to execute.
cd reactrouterapp
cd will move us into the directory for the React app.
npm i react-router react-router-dom
This command installs the required packages for this app.
Step 2: Adding Routes
In this step we will create the app's routes and route outputs. First open the /src folder inside the reactrouterapp directory.
Create a new file named Page.js and type the following
function Page() {
return(
<h1>This is the Page component</h1>
);
}
export default Page;
The function Page() returns a JSX object in its' return statement. The export default statement at the bottom lets us use this in other files, very convenient.
Next, change the contents of App.js to the following:
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Page from './Page'
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/page" element={<Page />} />
</Routes>
</Router>
</div>
);
}
export default App;
The first line imports from the React Router library, and it imports three components for our routing
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
The second line imports from our Page.js file from earlier, and it imports the <Page /> component we created earlier.
The function App() returns this:
<div className="App">
<Router>
<Routes>
<Route path="/page" element={<Page />} />
</Routes>
</Router>
</div>
Routes holds the routes and with the path= parameter can have a prefix. <Route> defines the specific routes, their paths, and the elements rendered (in this example that's our <Page /> component).
The app will return the <Page /> element when the /page route is visited.
Step 3: Running
To run the app run the follow command:
$ npm start
The out put should be something like this.
Compiled successfully!
You can now view reactrouterapp in the browser.
Local: http://localhost:3000
On Your Network: http://10.0.0.87:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
assets by status 6.93 KiB [cached] 1 asset
assets by chunk 1.6 MiB (name: main)
asset static/js/bundle.js 1.53 MiB [emitted] (name: main) 1 related asset
asset main.cdf5e8aba95c1b3dac48.hot-update.js 71.4 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
assets by path *.json 611 bytes
asset asset-manifest.json 583 bytes [emitted]
asset main.cdf5e8aba95c1b3dac48.hot-update.json 28 bytes [emitted] [immutable] [hmr]
asset index.html 1.67 KiB [emitted]
Entrypoint main 1.6 MiB (1.62 MiB) = static/js/bundle.js 1.53 MiB main.cdf5e8aba95c1b3dac48.hot-update.js 71.4 KiB 2 auxiliary assets
cached modules 1.41 MiB [cached] 107 modules
runtime modules 31.3 KiB 15 modules
javascript modules 3.95 KiB
./src/index.js 1.81 KiB [code generated]
./src/App.js 2.14 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 75 ms
Visit the link in the output, either one of them, and then visit the /page route and you should see something like this.
Congrats! You quickly created a React app with routes using React Router. Understanding & using routes and routing is a crucial skill for a wev developer, this will come up often in projects or on the job.
Sources
React Router v6
Create-React-App
React
Node.js
Npm
VSCode
Npx
This content originally appeared on DEV Community and was authored by ayubf
ayubf | Sciencx (2022-01-22T01:28:23+00:00) Create A React Router App in 5 Minutes. Retrieved from https://www.scien.cx/2022/01/22/create-a-react-router-app-in-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.