How to add new route to a page that uses different component?

[benbkk]

Hi Kelly

Firstly, thank you for the awesome work!

I need to add another page component but I couldn't figure out how to do that. Basically I need to add a contact page with a form. And plugins won't work so I think redux form is the way to go.

So I added the component - I was using the the existing single-page component as the template, make some changes on it and added to the routes, with a specific slug /page/contact. But it keeps using the same single-page. Could you please give me a hint of what I have missed out?

I tried Custom contact form won't work because react sees it as controlled input so no way to type. I also try another php page template that doesn't have #main in it but obviously won't work either because it's a spa now.

Could you please help.

Many thanks!

[ryelle]

You need to add the new router above the existing page router, so that section of router code would look like:

<Route path={ `${ path }author/:slug/p/:paged` } component={ Author } />
<Route path={ `${ path }page/contact` } component={ YourContactComponent } />
<Route path={ `${ path }page/**` } component={ SinglePage } />

The above works for me, I hope that helps! Let me know if you need anything else :)

[benbkk]

I did exactly that and now I tried again and now it works so I don't get what was wrong either 😂😂😂 Need the author's blessing probably. I spent hours on that.

By the way is there anything about wp cache that I should be aware about when Im working onunconventional theme-ing like this?

Thanks Kelly!

[benbkk]

Hi Kelly,

Sorry turned out i did a mistake. I put the contact form component on the SinglePage component instead of ContactPage component - thats why it worked. D'uh me.

So apart from the above, is there any additional steps? I think its something about the routes and the SInglePage component - they're a bit unusual.

On my test project, most of the menu items are pages. Thats how I see something is not right. On some pages the featured image is visible, some there but then gone as soon as react took over.

This doesn't happen on the SinglePost though, which has totally different code. When I tried to refactor both, (SinglePage and SInglePost) the one for the page doesn't work. It seems like it works differently from the Post. Shouldn't it be the same only different data?

Also, shouldnt routes be nested if they are children of the same parent route?

I mean like

<Route path="/repos" component={Repos}>
  <Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>

Is this something on progress that you have been researching as well? This is my first experience doing react on something like Wordpress thats actually already tricky with the menus.

What do you think?

[ryelle]

Do you have your code on github somewhere? I'm not sure I understand the problem you're having.

Also, shouldnt routes be nested if they are children of the same parent route?

No, because that nests the components, and we don't want nested components in Foxhound. In your example, /repos/ryelle/Foxhound would render

<Repos>
    <Repo params={{ userName: 'ryelle', repoName: 'Foxhound' }} />
</Repos>

(see the react-router documentation)

[benbkk]

Hi Kelly, Actually I can't remember as well as I haven't get back to it for awhile. :) But I remember it started as I was trying to refactor the navigation because I want to try out custom styling. Then after that things got messed up - like it seemed that it can't remember the 'home' state. So as I go through the nav visiting other pages is fine, but then when I click on the home page, it just went blank.

Another thing that I remember I don't quite understand is that why some featured image just dont show up. I was setting all the nav items to static pages. Some page show the featured image just fine, but others didn't.

I think i'll try to pull again at some point cause I have totally ruined the last one :) So... yes please you may close this issue. Or I will do now actually.

Thanks again Kelly!