CODEWITHSUNDEEP
urlgetrequestreactjsreact-router
zazmaister
zazmaister

Reputation: 727

React GET request URL changes after clicked Link when i refresh page

When i try to redirect to my task detail page and i want to refresh it i got an error 404 File not found from my index.html because my path to stylesheet and path to scripts.js changes from localhost:8080/styles.css to localhost:8080/tasks/style.css and i dont know why does that happen?

My html code:

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='http://fonts.googleapis.com/cssfamily=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- build:css css/application.css -->
  <link rel="stylesheet" href="styles.css">//BREAKS HERE
  <!-- endbuild -->

</head>
<body>
  <main class="site-content" id="main">
    <p>Main content</p>
  </main>

  <!-- build:js js/application.js -->
  <script src="scripts.js"></script>//AND BREAKS HERE
  <!-- endbuild -->
</body>

I am using react-router but i am pretty new in react so i dont know if problem is here.

Routes:

<Route handler={App}>
    <Redirect from="/" to="login" />

    <Route name="login" path="login" handler={Login} />
    <Route name="dashboard" path="dashboard" handler={Dashboard} />
    <Route name="task" path="/tasks/:id" handler={Task} />
  </Route>

When i am on dashboard refresh works fine but when i go to tasks/:id and refresh page i get this error:

22821:14 GET http://localhost:8080/tasks/styles.css 
22821:27 GET http://localhost:8080/tasks/scripts.js
Failed to load a resource: the server responded with status of 404

Upvotes: 0

Views: 887

Answers (2)

kpimov
kpimov

Reputation: 13932

The App component has no path and the task route's path shouldn't begin with a / in this kind of situation. See if this works:

<Route path="/" handler={App}>
        <DefaultRoute handler={Login} />
        <Route name="login" path="login" handler={Login} />
        <Route name="dashboard" path="dashboard" handler={Dashboard} />
        <Route name="tasks" path="tasks/:id" handler={Task} />
</Route>

Upvotes: 0

cwbutler
cwbutler

Reputation: 1260

You need to set the path in the src of your tags correctly.

<!-- build:css css/application.css -->
<link rel="stylesheet" href="/styles.css">//BREAKS HERE
<!-- endbuild -->

<!-- build:js js/application.js -->
<script src="/scripts.js"></script>//AND BREAKS HERE
<!-- endbuild -->

Notice the '/'. It tells the browser to look from the root of the domain name. If you leave that off... it appends it to current path of the url.

Upvotes: 2

Related Questions