Not returning HTML in React

Asked

Viewed 60 times

-1

Guys I’m doing Omni Stack 9 from Rocket Seat, where Diego teaches to develop a copy of Airbnb but for Devs. I’m doing the Web part and I can do even the quiet login page, is redirecting to Dashboard all right! But when I run the route of Dashboard or New (new spot) is not returning me anything! In class he puts a H1 just to show the page and appears the title straight! inserir a descrição da imagem aqui

I put H1 there in Return, but it’s not returning it! No html I put it back. And neither does this function I created

I created the page first so the user can login inserir a descrição da imagem aqui I made a file of routes so I could have navigation through the system inserir a descrição da imagem aqui

From the login page I redirect to the dashboards page (which is the first print) The login page is all working perfectly and redirecting normal! But the other two I created Dashboards and New not one of the two returns me HTML when I put something!

NOTE: in the login page I call the route "dashboards" in the plural. And in the first print is in the singular, I already correct putting in the plural and still not solved

javascript react react-router

  • Good evening, try returning the value inside quotes. ex:'<h1>Hello World</h1>';

  • Check where you are calling the page. In case Console.log is returning something? Enter the code written. Image is bad to parse/copy/understand. .

  • @Kaykybruno put the quotes and was not and the console only accuses me the variable I created and is not being used!

  • @Rebecanonato I am calling for the login page! I will edit the question and put the prints and explain my intention

  • @Victorsouza Edith your question, replacing the image with the code itself.

1 answer

1


Check on your call in Routes.js.

<Route path="/dashboards" component={Dashboards} />

And in your Routes.js imports don’t need to point to index.js, only to the Folder in question.

 import Logon from "./pages/Logon";
 import Profile from "./pages/Dashboards";

And be very careful. Because you must keep the Nomenclature standard, with Uppercase and Lowercase. Type, your Login is in Lowercase (First Function Name Letter and Folder Name).

It would be like that:

Routes.js file

import Logon from "./pages/Logon";
import Profile from "./pages/Profile";

export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Logon} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

File Logon.js

export default function Logon() {
    try {
      history.push("/profile");
    } catch (err) {
      alert(`Algo deu errado: ${err}`);
    }
  }

  return (  );
}

Profile.js file

export default function Profile() {
  return (
    <div className="profile-container">
         Hello Word!!!
    </div>
  );
}

Obs: If you had put your written code instead of photo, I would have edited it.

Browser other questions tagged javascript react react-router

You are not signed in. Login or sign up in order to post.