How Do I Link Pages Correctly? Code Provided

Esi · 2024-09-05T00:18:28.684Z

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.

K

kapa.ai•9/5/24, 12:18 AM

Hi @Esi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•9/5/24, 12:18 AM

----------------------
To link pages correctly in Wasp, you need to define routes in your

main.wasp

main.wasp

file and then use the

Link

Link

Link

Link component from

react-router-dom

react-router-dom

react-router-dom

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

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"
}

// 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

SignupRoute

SignupRoute

SignupRoute and

LoginRoute

LoginRoute

LoginRoute

LoginRoute. The

SignupRoute

SignupRoute

SignupRoute

SignupRoute is linked to the

SignupPage

SignupPage

SignupPage

SignupPage component, and the

LoginRoute

LoginRoute

LoginRoute

LoginRoute is linked to the

LoginPage

LoginPage

LoginPage

LoginPage component. The

component

component

component

component field specifies the file where the component for the page is defined.

Now, in your JSX files, you can use the

Link

Link

Link

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>
  )
}

// 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

Link

Link

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

SignupForm.jsx

SignupForm.jsx

SignupForm.jsx file is correctly exporting a component that returns some JSX.

K

kapa.ai•9/5/24, 12:18 AM

Here's an example of how your

SignupForm.jsx

SignupForm.jsx

SignupForm.jsx

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>
  )
}

// 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

SignupPage

SignupPage

SignupPage component that returns some JSX. This JSX includes the

SignupForm

SignupForm

SignupForm

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:
----------------------

K

kapa.ai•9/5/24, 12:18 AM

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?

M

miho•9/5/24, 7:58 AM

It would be easier if you could share the code of your

main.wasp

main.wasp

file in the textual form between backticks (`) you write three times the symbol

 and then your code

 and then your code

 and then your code

 and then your code

and then three times the symbol.

M

miho•9/5/24, 8:00 AM

Few questions:

How many routes do you have defined in your
```
main.wasp
```
```
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

How Do I Link Pages Correctly? Code Provided

Similar Threads

Similar Threads

Similar Threads