Confused - how to route URL path to app pages

Questions
1

Sorry if this is a frequent question - I tried reading old answers and am still confused.

I am using F7v5 with component pages - no Vue. I started with the default app project.

E.g.

router.js:

import HomePage from ‘…/pages/home.f7.html’;
import DataViewPage from ‘…/pages/dataview.f7.html’;
var routes = [
{
path: ‘/’,
component: HomePage,
},
{
path: ‘/view/:dataId/’,
component: DataViewPage,
},
];

This routing works fine within app. But, suppose I want to email someone a link to a specific data ID. Eg.

https://mydomain.com/view/100/

I want this URL to navigate to that path in the router, /view/:dataId/. But if use this URL in my browser (using dev server, npm run dev), then F7 just says “cannot get”.

How do I make URL route navigate within app routing, with parameters? Thank you!

2 Likes
2

https://framework7.io/docs/view.html#view-parameters “Push State”

3

Hi! My PushState is true but I still can’t navigate through url. Is there anything else I should change?

4

Hi! I’m currently using F7 v5.5 and I am pretty sure we have the same problem. If we navigate from the app to my-web/about it works, since we have set up pushState and pushStateSeparator. The thing is if we paste the link on URL and then we navigate, there is no page matching, either the app non found page. Any help is welcome! Thanks

5

@centilum, @Max987 Did you solve this issue? I have the same problem :relieved:

6

This will solve your problem. Set like this

   <f7-view id="main-view" main url="/"  :push-state="true">
7

Like how? :sweat_smile:

8

Hey! I found out that if I set the pushStateSeparator to some value it works! Otherwise, if you set pushStateSeparator="" it doesn’t, at least in React. So for the moment I set “#” but by default is "!# so it should work like that. I don’t think it is a server problem but if you want to get it work without any separator try to do it with another Router, not the one provided by Framework7. If I have time I will try it this month.

9

I think I got it! (Although I have not tried your method).

I have seen I had three PushState parameters

view: {
  pushState: true,
  pushStateRoot: (function() {
    return location.pathname;
  })(),
  pushStateSeparator: '#!'
}

In the documentation (https://framework7.io/docs/view.html) it says that pushStateRoot is useful only in case you use empty ("") pushStateSeparator.

I’m using pushStateSeparator: ‘#!’

Therefore it is not useful to me. I have removed it and it did the trick. Now it works!

I hope It can help someone else.

And thank you very much @centilum for answering and proposing an alternative!

2 Likes
10

Congrats! Anyways, now you achieve make it work with a not empty pushStateSepartor isn’t it? So this configuariton works:

view: {
pushState: true,
pushStateSeparator: ‘#!’
}

But not this one with pushSepparator empty, which we would like to:

view: {
pushState: true,
pushStateRoot: (function() {
return location.pathname;
})(),
pushStateSeparator: ‘’
}
I’m going to try installing react-router this afternoon. Stay tuned for news and good luck!

11

any update for this issue? i have same problem too :frowning:

12

I solved it! You have how I solved the problem above. There is an alternative solution of another user too

13

how about f7 with react-router? i have problem with f7 with empty pushStateSeparator.

14

I haven’t stayed tuned on F7 for some month but when I read about mix it, it results a really mess and absolutely unadvisable! Don’t know if there is newer solution. Anyway, good luck!

1 Like
15

Hi, I see no push state :roll_eyes:

16

I cannot do it even without parameters! I need direct access to pages, cos I wanna use f7 as a dashboard panel. I use the create --ui cli and make the sample with it using f7 core.For example I want “/about” route to work and be shown in browser URL but I donno how to configure it. I make browserHistory in route options true but nothing changes. any idea?
In docs it says:
the route’s path property means the path/url that will be displayed in browser window address bar (if browserHistory enabled) when the following route will be loaded either by api or clicking on a link with same path.

but I can’t do it. still nothing in address bar

17

Hello, @Reza7rm

push state is now browserHistory, you can set this up with, for example if you running locally:

browserHistory: true,
browserHistoryRoot: ‘http://localhost:8080’,
browserHistorySeparator: ‘’,

18

Dear everyone,

I successfully added the browser history information to the url, now my url is displayed like this
http://localhost:3000/group/129121 or http://localhost:3000/groups

But as soon as I make a page refresh via the browser reload button I get errors, the page is not displayed, I also cannot directly access the page via bookmark:

view.svelte? [sm]:195 Uncaught TypeError: switch_value is not a constructor
at Array.create_default_slot (view.svelte? [sm]:195:45)
at create_slot (index.mjs:69:27)
at create_fragment (router-context-provider.svelte? [sm]:2:38)
at init (index.mjs:1877:37)
at new Router_context_provider (router-context-provider.svelte? [sm]:9:11)
at create_each_block (view.svelte? [sm]:195:45)
at create_fragment (view.svelte? [sm]:193:9)
at init (index.mjs:1877:37)
at new View (view.svelte? [sm]:97:25)
at Array.create_default_slot (app.svelte:26:73)

Any ideas what is the problem here?

I noticed it seems to be a problem with routing to asyncComponents.
When I switch to a normal “component” routing it works, the page title is correct, but the back button on iOS is not working and the page displayed under the navbar is still the home page.