was created with unknown prop 'location'

[ligrant]

If use:
<Route exact path="about"><About /></Route>
All good.
If use:
<Route exact path="about" component={About} />
About.svelte:14 was created with unknown prop 'location'
About.svelte:14 was created with unknown prop 'exact'

Any ideal?

"svelte": "^3.20.1"
"svelte-routing": "^1.4.2"

[n0n3br]

Can you put the app in repl or codesandbox so we can reproduce the error and try fo fix it ?

[ligrant]

Basically I just follow the instruction created a svelte app and install the svelte-routing lib, and copy past.
Today I tried recreate the app on sandbox, it's working well. don't know why i got the warning when running on localhost!

maybe just leave it alone or use <Route exact path="about"><About /></Route> instead
Any suggest will be appreciated

### localhost

### sandbox

[GarethOates]

I get this warning if I do:
<Route path="post" component="{Post}" />
but not when I do
<Route path="post"><Post /></Route>

[BogdanDarius]

In the About component add:
export let location;

[EmilTholin]

Hi @ligrant!

You get this warning because the location prop is passed to the rendered component in the Route:

<svelte:component this="{component}" location={$location} {...routeParams} {...routeProps}  />

This is so that you can make use of the location information in your component:

<!-- App.svelte -->
<Route path="blog" component="{Blog}" />

<!-- Blog.svelte -->
<script>
  import queryString from "query-string";

  export let location;

  let queryParams;
  $: queryParams = queryString.parse(location.search);
</script>

<h1>Blog</h1>
<p>{queryParams.foo}</p>

This sadly means that you get a warning if you are not using the passed in location prop in your component. I'm not sure how to make this warning go away without making the API more cumbersome.

The exact prop should however not be passed to the rendered component, so About.svelte:14 was created with unknown prop 'exact' is a bug that we will fix.

[clintwood]

@EmilTholin I obviously have the same issue but was thinking that since the location prop is not always used by components would it not make sense to rather expose make it available via context/store (IIRC there is getContext(LOCATION) or some store).

I'm not super familiar with svelte-routing internals but something like:

<!-- Blog.svelte -->
<script>
  import { location } from 'svelte-routing';
  import queryString from "query-string";

  let queryParams;
  $: queryParams = queryString.parse($location.search);
</script>

<h1>Blog</h1>
<p>{queryParams.foo}</p>

EDIT: Interestingly I've just seen that svelte-spa-router does as I'm suggesting for both $location and $querystring.

[jimmywarting]

PS use URLSearchParams instead of query-string

[quantuminformation]

Also getting this here

https://github.com/quantuminformation/svelte-firebase-starter

  <Route path="register" component="{Register}" />
            <Route path="recover" component="{Recover}" />
            <Route path="signin" component="{Signin}" />
            <Route path="settings" component="{Settings}" />
            <Route path="users" component="{Users}" />
            <Route path=":username" component="{Profile}" />

            <Route path="/" component="{Home}" />

[HNazmul-X]

I got the same error at the console... My code is also similar this that is

<Route  path="/" component={Homepage} />
<Route path="/add-poll/" component={About} />

[HNazmul-X]

hey, @EmilTholin this package becoming popular. you should fix all of the bugs. I saw that the latest version is a year ago. please fix the bug

[talwat]

I'm having the same exact issue.

[ainaarawaida]

was created with unknown prop 'location'
was created with unknown prop 'navigate'

same error here when use
<Route
path={mylinkurl + "my-account/tambahJenisYuran"}
component={TambahJenisYuran}
/>

[mkmoisen]

@EmilTholin What is the solution to this problem?

If we don't use export let location; the console debugger shows a warning.

If we do use export let location; the IDE shows a warning for unused variable.

This works in some cases:

<Route path="/"><Home /></Route>

But it does not work when you have parameters:

<Route path="/*foo"><Home /></Route>

Property 'foo' is missing in type '{}' but required in type '{ foo: any; }'.js(2741)

[krishnaTORQUE]

Hi
I forked svelte-routing > https://github.com/krishnaTORQUE/svelte-routing-next.
I resolved this issue there.
And I merged most of the PR from origin repo.
Please let me know if you have any query.
Thanks.

[krishnaTORQUE]

Svelte Routing v1.8.0 released.
This issue has been fixed.
View Changelog: https://github.com/EmilTholin/svelte-routing/blob/master/CHANGELOG.md