CODEWITHSUNDEEP
reactjsreact-router
user9105234
user9105234

Reputation:

How to add another route to the default react application made with create-react-app?

I'm setting up a react web application and have used the default create-react-app to generate the project. I'm unsure however how I can add other routes to the default server

for example:

localhost:3000/login

should render a file called login.html

I'm not even sure where to find the server file. I'm able to run npm build and then use my own server to execute the static files, but I was wondering if there was a way to implement this in the default project because it allows you to see live changes etc.

My Login.html is located in the public folder and login.js and login.css are located in the src folder.

I apologise if this is a really newbie question but I wasn't able to find much online.

Upvotes: 1

Views: 2090

Answers (2)

mancristiana
mancristiana

Reputation: 2155

As per Create React App's documentation.

Create React App doesn't prescribe a specific routing solution, but React Router is the most popular one. To add it, run:

npm install --save react-router-dom

To try it, delete all the code in src/App.js and replace it with any of the examples on its website. The Basic Example is a good place to get started.

Note that you may need to configure your production server to support client-side routing before deploying your app.

I recommend you read the quick start guide on React Router. For the problem you described this means that you might have a src/App.js file that may look something like this:

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from "./Login";
import Home from "./Home";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    );
  }
}

export default App;

Upvotes: 2

Ianohurr
Ianohurr

Reputation: 129

Create-React-App is a single page application, so you don't have multiple HTML files, just index.html that comes initially. And your question could have multiple different answers, so I'll just tell you the most popular way I personally know of.

  1. React-Router-Dom

This is how a lot of people navigate around having different views on their site. To give a basic idea on how it works, you create a router that contains different 'routes' that all point towards a different class within your project that can be it's own 'view' which is basically a different page.

<HashRouter>
  <Switch>
    <Route path="/" name="Home" component={Full}/>
  </Switch>
</HashRouter>

So here 'Full' is the name of a component, which is just a javascript class, much like 'App.js' that you should already have from using Create-React-App.

Download here

What you want to be doing if you're using react is making different Javascript classes, much like 'App.js' and then just redirecting to them from whatever initial page you load from your website. There's a lot of youtube tutorials on React-Router

Upvotes: 1

Related Questions