Wasp-lang•3mo ago

How Do I Link Pages Correctly? Code Provided

Beginner Question. I'm needing help on getting my page to show/load. The first page (SignupPage.jsx) which is showing Joint Vibe, when i click on the Sign up button in the top right corner, it takes me to a black screen (SignupForm.jsx) My question is, how come a black blank screen is showing up instead of the code i have for SignupForm.jsx? I have provided files as well as the main.wasp and App.jsx files. If you're kindly able to explain in detail as you would to a child so that i stop getting these errors. I have been stuck on this for days. Thanks in advance.

030.pdf

2 Replies

kapa.ai•3mo ago

Hi @Esi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To link pages correctly in Wasp, you need to define routes in your main.wasp file and then use the Link component from react-router-dom in your JSX files to navigate between pages. Here's an example of how you can define routes in your main.wasp file:

// main.wasp

// ...

route SignupRoute { path: "/signup", to: SignupPage }
page SignupPage {
  component: import { SignupPage } from "@src/SignupPage"
}

route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
  component: import { LoginPage } from "@src/LoginPage"
}

// main.wasp

// ...

route SignupRoute { path: "/signup", to: SignupPage }
page SignupPage {
  component: import { SignupPage } from "@src/SignupPage"
}

route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
  component: import { LoginPage } from "@src/LoginPage"
}

In the above code, we're defining two routes: SignupRoute and LoginRoute. The SignupRoute is linked to the SignupPage component, and the LoginRoute is linked to the LoginPage component. The component field specifies the file where the component for the page is defined. Now, in your JSX files, you can use the Link component to navigate between these pages. Here's an example:

// src/LoginPage.jsx

import { Link } from 'react-router-dom'
import { LoginForm } from 'wasp/client/auth'

export const LoginPage = () => {
  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <LoginForm />
      <br />
      <span>
        I don't have an account yet (<Link to="/signup">go to signup</Link>).
      </span>
    </div>
  )
}

// src/LoginPage.jsx

import { Link } from 'react-router-dom'
import { LoginForm } from 'wasp/client/auth'

export const LoginPage = () => {
  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <LoginForm />
      <br />
      <span>
        I don't have an account yet (<Link to="/signup">go to signup</Link>).
      </span>
    </div>
  )
}

In the above code, we're using the Link component to create a link to the signup page. When this link is clicked, the user will be navigated to the signup page. If you're seeing a blank screen when you navigate to a page, it could be because the component for that page is not returning any JSX, or there's an error in your code that's preventing the JSX from being rendered. Make sure that your SignupForm.jsx file is correctly exporting a component that returns some JSX. Here's an example of how your SignupForm.jsx file might look:

// src/SignupForm.jsx

import { SignupForm } from 'wasp/client/auth'

export function SignupPage() {
  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <SignupForm />
      <br />
      <span>
        I already have an account (<Link to="/login">go to login</Link>).
      </span>
    </div>
  )
}

// src/SignupForm.jsx

import { SignupForm } from 'wasp/client/auth'

export function SignupPage() {
  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <SignupForm />
      <br />
      <span>
        I already have an account (<Link to="/login">go to login</Link>).
      </span>
    </div>
  )
}

In the above code, we're exporting a SignupPage component that returns some JSX. This JSX includes the SignupForm component and a link to the login page. If you're still having trouble, I would recommend checking the console for any error messages, as they can often provide more information about what's going wrong. Sources: - Adding Login and Signup Pages (https://wasp-lang.dev/docs/tutorial/auth#adding-login-and-signup-pages) - Signup Form (https://wasp-lang.dev/docs/auth/ui#signup-form) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Esi, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•3mo ago

It would be easier if you could share the code of your main.wasp file in the textual form between backticks (

) you write three times the symbol ``` and then your code ``` and then three times the symbol.
Few questions:
- How many routes do you have defined in your

main.wasp`? - Do you have any errors in the browser console when you see the black screen? - Have you gone through the Wasp tutorial to familiarise yourself with the basics? https://wasp-lang.dev/docs/tutorial/create

Gaming

Programming

How Do I Link Pages Correctly? Code Provided