CODEWITHSUNDEEP
reactjscreate-react-appreact-router-dom
HnM97
HnM97

Reputation: 153

How to change base url of create react app?

I'm using react-router-dom with create-react-app.

Running scripts with yarn start, it starts with http://localhost:3000/(myprojectname), not http://localhost:3000/

When routing with react-router-dom, I have to remove myprojectname from url and then add page routes.

There seems to be a problem with the initial setting of the project,

how can I start from http://localhost:3000/ ??

Add package.json, router code.

package.json:

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.3.2",
    "@types/styled-components": "^5.1.16",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "brace-expansion": "^2.0.1",
    "gh-pages": "^3.2.3",
    "prettier": "^2.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "5.3.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://myprojectname"
}

App.tsx:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'

import Detail from 'pages/detail/Detail'
import GlobalStyle from './GlobalStyle'
import Home from 'pages/home/Home'
import Login from 'pages/login'
import Signup from 'pages/signup'

function App() {
  return (
    <Router>
      <GlobalStyle />
      <div className="App">
        <div className="auth-wrapper">
          <Switch>
            <Route exact path="/" component={Login} />
            <Route path="/login" component={Login} />
            <Route path="/signup" component={Signup} />
            <Route path="/home" component={Home} />
            <Route path="/detail" component={Detail} />
          </Switch>
        </div>
      </div>
    </Router>
  )
}

export default App

Upvotes: 12

Views: 51280

Answers (3)

Utkarsh verma
Utkarsh verma

Reputation: 169

You just need to do two things for changing base Url for ReactRouterDom dom. It is useful when you host the website on website like github page and or at url something like Https://website.com/mywebsite or at sub link .

First - You have to add a attribute Like -

<BrowserRouter basename='/mywebsite'>

Or open your package.json and add Before building your project for production

"homepage": "/your-subdirectory",

for my case :

"homepage": "/mywebsite",

I hope this will help, Feel free to ask if you stuck in this .

Upvotes: 8

Drew Reese
Drew Reese

Reputation: 202677

In your package.json file change the homepage entry to a relative path, excluding any sub-domain/nested directory.

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ....
  },
  "scripts": {
    ...
  },
  ...,
  "homepage": "https://hy57in.github.io/2021-Industry-Hands-On-Project"
}

to

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  ...,
  "homepage": "./"
}

Upvotes: 20

manuel taveras
manuel taveras

Reputation: 101

I found some helpful information on https://v5.reactrouter.com/web/api/Redirect "Rendering a will navigate to a new location. The new site will override the current location in the history stack like server-side redirects (HTTP 3xx) do."

Is there any way you can share your repository? I'll be the best way to help you. Pretty much, I need a little bit more information to help you.

Upvotes: 1

Related Questions