hyperapp-router

hyperapp-router copied to clipboard

Firstly, i wish to thank the Hyperapp community for it's great work on hyperapp.

However, i am facing an issue implementing a feature. I'm almost done making an Hyperapp js demo tutorial with HA 1.x. My demo is a stateful shopping cart app. I am implementing routing using @hyperapp/router.

Now the issue is... my "/" route defaults to render the view function which contains some presentational components, some actions and props. I would love to render the view function as "exact" using the router, but all efforts i've tried have not been giving the results as expected.

Is there a way i can use <Router path="/" render={ view } /> using some sort of workaround?

Doing this practically returns undefined as expected even if i pass state, actions args as it is not a lazy component. (I don't want to use lazy components as i'd love to see if this feature can be implemented without them).

Thank you!

@Irelokeh Have you looked at the Switch component?

@Irelokeh I don't want to use lazy components as i'd love to see if this feature can be implemented without them.

Props for that! Lazy components are on their way out by the way. Anyway, can you share a CodePen or post some code I can look at?

Ok sure @jorgebucaran

This is View.js file:

import { Link, Route,location, Switch } from "@hyperapp/router"

import { NavBar } from './components/NavBar'
import { MovieCard }  from './components/MovieCard'


import routes from '../routes/routes'


export const view = ( state, actions, {match} ) => (


<div oncreate= { () => actions.GET_ALL_MOVIES() } >

      {routes}

      <NavBar/> 

<section class="section">
<div class="container">    
<div class="columns">
<div class="column  is-3">    


    <h1 class="title is-6 has-text-grey"> {state.range_value} </h1>
    
    <input   
    type="range" 
    oninput = { (event) => actions.FILTER_BY_PRICE(event) }    
    onchange = { (event) => actions.FILTER_BY_PRICE(event) }                          
    className="slider is-fullwidth is-success" 
    step="0.1" min="0" max="150" 
    value = {state.range_value}  />
    
    </div>  

<div class="column  is-9">    
<div class="columns is-multiline">

  { state.movie_list &&
    state.movie_list.map( ({ id, title, poster_path, price, vote_average, planet_shipping }) =>

<div className="column  is-4">

      <MovieCard movie_id = {id}
                 title = {title } 
                 poster = {poster_path }
                 price = {price}
                 rating = {vote_average}
                 planet_shipping = { planet_shipping } 
                 view_link = { <Link to={`/${id}`} >Details</Link> }  /> 
                 
          </div>  
                  )

  } 

</div>
</div>
</div>
</div>
</section>

     </div>   
 
)```

**and this is routes .js file:**

```import { h } from 'hyperapp'
import { Route, Switch } from "@hyperapp/router"

import { MovieDetail } from '../view/components/MovieDetail'
import { MovieCard } from '../view/components/MovieCard';



export default 
<Switch>    
    <Route path={ "/:movie_id"} render={MovieDetail} />
    <Route path="/cart" render={() => <p> Hello, cart </p> } />    
  </Switch>```

@jorgebucaran so sorry for inconvieniences, i'm a beginner Hyperapper This works and render all components but the "/" route is not exact and all other routes render in the home.

Could this due to my file structure?