Is there a way to avoid the "/" characters getting added to my URLs?

In this sandbox, click on the /page1 or /page2 links and you will see the URL change to /page1/ or /page2/. Happens in my own app, too.

https://codesandbox.io/s/n7v5o7j310

All the code:

import React from "react";
import ReactDOM from "react-dom";
import { mount, route } from "navi";
import { Router, Link } from "react-navi";

import "./styles.css";

const routes = mount({
  "/": route({
    view: () => (
      <p>
        Home. Go to <Link href="/page1">page 1</Link> or{" "}
        <Link href="/page2">page 2</Link>.
      </p>
    )
  }),
  "/page1": route({
    view: () => (
      <p>
        Page 1. Go <Link href="/">home</Link> or to{" "}
        <Link href="/page2">page 2</Link>.
      </p>
    )
  }),
  "/page2": route({
    view: () => (
      <p>
        Page 2. Go <Link href="/">home</Link> or to{" "}
        <Link href="/page1">page 1</Link>.
      </p>
    )
  })
});

function App() {
  return (
    <div className="App">
      <Router routes={routes} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Issue

What happens is that i ask the user to load a url with a verification token in it. My [routeRegistry.login.verifyToken.path] should pick this up, and it does. It then loads the VerifyToken component in the bottom of this issue.

But when everything goes fine, and it is suppose to call navigate, navigate crashes on this line https://github.com/frontarm/navi/blob/master/packages/navi/src/Navigation.ts#L182 It says _history is undefined.

How come?

Code setup

I have this route setup for now

export default mount({
  '*': map((request, context) => {
    const { authService } = context
    if(_.isEmpty(authService.currentUser)){
      const originalUrl = encodeURIComponent(request.originalUrl)
      return redirect(
        `${routeRegistry.login.path}?redirectTo=${originalUrl}`,
        {exact: false}
      )
    }
    return getAuthenticatedRoutes();
  }),
  [routeRegistry.root.path]: redirect(routeRegistry.login.path),
  [routeRegistry.login.path]: map(async (request, context) => {
    const { authService } = context
    if(!_.isEmpty(authService.currentUser)) {
      const path = decidedRedirectPath(request.params.redirectTo, routeRegistry.dashboard.path)
      return redirect(path)
    } else {
      return getLoginRoute();
    }
  }),
})

const getLoginRoute = () => {
  return mount({
    '/': route({
      title: 'Login',
      view: <SignUp />
    }),
    [routeRegistry.login.verifyToken.path]: route((req,context) => {
      const token = req.params.token
      return {
        title: 'Verifying...',
        view: <TokenVerification token={token} authService={context.authService} />,
      }
    }),
  })
}

With this verifyToken component

import { useNavigation } from 'react-navi';

export default ({token, authService}) => {
  let navigation = useNavigation();
  useEffect(() => {
    const verifyEmailAsync = async () => {
      const { res } = await verifyEmail(token);
      if(res.status === 200) {
        await authService.login(res.data.token)
        navigation.navigate('/dashboard');
      }
    }
    verifyEmailAsync();
  }, [])

  return (
    <div>Loading..</div>
  );

First off, thanks for creating this! Super exciting project 🙌 Currently migrating a large web app from react-router to navi.

It seems to be an Uncaught Error: URL not found when navigating to a page that doesn't exist. From the docs I believe the error is supposed to be a NotFoundError so that the <NavNotFoundBoundary /> but it just looks like a generic error based on the console output. The strange thing is that the Error boundary catches the error 🤔

navi: 0.10.5 react-navi: 0.10.6 react: 16.6.0

Because the error message is not present on my Express server (using createMemoryNavigation) it leads me to believe the problem might be related to createBrowserNavigation, but I'm uncertain.

The error is also present on the examples on the Navi docs webpage 👇

Errors.js:24

Uncaught Error: URL not found: /asdf/
    at createNotFoundSegment (Segments.js:38)
    at class_1../node_modules/navi/dist/es/Node.js.NodeMatcher.getResult (Node.js:29)
    at class_1../node_modules/navi/dist/es/Switch.js.SwitchMatcher.execute (Switch.js:121)
    at class_1../node_modules/navi/dist/es/Node.js.NodeMatcher.getResult (Node.js:22)
    at RouteObservable.refresh (RouteObservable.js:28)
    at RouteObservable.handleChange (RouteObservable.js:13)
    at RouteObservable../node_modules/navi/dist/es/RouteObservable.js.RouteObservable.subscribe (RouteObservable.js:51)
    at CurrentRouteObservable../node_modules/navi/dist/es/CurrentRouteObservable.js.CurrentRouteObservable.handleURLChange (CurrentRouteObservable.js:186)
    at CurrentRouteObservable../node_modules/navi/dist/es/CurrentRouteObservable.js.CurrentRouteObservable.refresh (CurrentRouteObservable.js:110)
    at new CurrentRouteObservable (CurrentRouteObservable.js:94)
NaviError	@	Errors.js:24
NotFoundError	@	Errors.js:40
createNotFoundSegment	@	Segments.js:38
./node_modules/navi/dist/es/Node.js.NodeMatcher.getResult	@	Node.js:29
./node_modules/navi/dist/es/Switch.js.SwitchMatcher.execute	@	Switch.js:121
./node_modules/navi/dist/es/Node.js.NodeMatcher.getResult	@	Node.js:22
RouteObservable.refresh	@	RouteObservable.js:28
RouteObservable.handleChange	@	RouteObservable.js:13
./node_modules/navi/dist/es/RouteObservable.js.RouteObservable.subscribe	@	RouteObservable.js:51
./node_modules/navi/dist/es/CurrentRouteObservable.js.CurrentRouteObservable.handleURLChange	@	CurrentRouteObservable.js:186
./node_modules/navi/dist/es/CurrentRouteObservable.js.CurrentRouteObservable.refresh	@	CurrentRouteObservable.js:110
CurrentRouteObservable	@	CurrentRouteObservable.js:94
createCurrentRouteObservable	@	CurrentRouteObservable.js:53
BrowserNavigation	@	BrowserNavigation.js:92
createBrowserNavigation	@	BrowserNavigation.js:44
main$	@	index.js:27
tryCatch	@	runtime.js:65
invoke	@	runtime.js:303
prototype.(anonymous function)	@	runtime.js:117
tryCatch	@	runtime.js:65
invoke	@	runtime.js:155
(anonymous)	@	runtime.js:202
callInvokeWithMethodAndArg	@	runtime.js:201
enqueue	@	runtime.js:224
prototype.(anonymous function)	@	runtime.js:117
./node_modules/regenerator-runtime/runtime.js.runtime.async	@	runtime.js:248
main	@	index.js:26
./src/index.js	@	index.js:72
__webpack_require__	@	bootstrap:68
0	@	commons.js:91567
__webpack_require__	@	bootstrap:68
(anonymous)	@	bootstrap:238
(anonymous)	@	bootstrap:238
Promise.then (async)		
invoke	@	runtime.js:164
(anonymous)	@	runtime.js:202
callInvokeWithMethodAndArg	@	runtime.js:201
enqueue	@	runtime.js:224
prototype.(anonymous function)	@	runtime.js:117
./node_modules/regenerator-runtime/runtime.js.runtime.async	@	runtime.js:248
main	@	index.js:26
./src/index.js	@	index.js:72
__webpack_require__	@	bootstrap:68
0	@	commons.js:91567
__webpack_require__	@	bootstrap:68
(anonymous)	@	bootstrap:238
(anonymous)	@	bootstrap:238


react-dom.development.js:15123

The above error occurred in the <InnerNavContent> component:
    in InnerNavContent (created by Context.Consumer)
    in NavContent
    in InnerNotFoundBoundary (created by Context.Consumer)
    in ErrorBoundary (created by Root)
    in NavProvider (created by Root)
    in IntlProvider (created by LanguageProvider)
    in LanguageProvider (created by Root)
    in Provider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, InnerNotFoundBoundary.
logCapturedError	@	react-dom.development.js:15123
logError	@	react-dom.development.js:15157
callback	@	react-dom.development.js:15931
callCallback	@	react-dom.development.js:11194
commitUpdateEffects	@	react-dom.development.js:11233
commitUpdateQueue	@	react-dom.development.js:11224
commitLifeCycles	@	react-dom.development.js:15271
commitAllLifeCycles	@	react-dom.development.js:16523
callCallback	@	react-dom.development.js:149
invokeGuardedCallbackDev	@	react-dom.development.js:199
invokeGuardedCallback	@	react-dom.development.js:256
commitRoot	@	react-dom.development.js:16677
completeRoot	@	react-dom.development.js:18069
performWorkOnRoot	@	react-dom.development.js:17997
performWork	@	react-dom.development.js:17901
performSyncWork	@	react-dom.development.js:17873
requestWork	@	react-dom.development.js:17761
scheduleWork	@	react-dom.development.js:17566
scheduleRootUpdate	@	react-dom.development.js:18240
updateContainerAtExpirationTime	@	react-dom.development.js:18267
updateContainer	@	react-dom.development.js:18324
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render	@	react-dom.development.js:18586
(anonymous)	@	react-dom.development.js:18726
unbatchedUpdates	@	react-dom.development.js:18124
legacyRenderSubtreeIntoContainer	@	react-dom.development.js:18722
render	@	react-dom.development.js:18783
main$	@	index.js:64
tryCatch	@	runtime.js:65
invoke	@	runtime.js:303
prototype.(anonymous function)	@	runtime.js:117
tryCatch	@	runtime.js:65
invoke	@	runtime.js:155
(anonymous)	@	runtime.js:165
Promise.then (async)		
invoke	@	runtime.js:164
(anonymous)	@	runtime.js:202
callInvokeWithMethodAndArg	@	runtime.js:201
enqueue	@	runtime.js:224
prototype.(anonymous function)	@	runtime.js:117
./node_modules/regenerator-runtime/runtime.js.runtime.async	@	runtime.js:248
main	@	index.js:26
./src/index.js	@	index.js:72
__webpack_require__	@	bootstrap:68
0	@	commons.js:91567
__webpack_require__	@	bootstrap:68
(anonymous)	@	bootstrap:238
(anonymous)	@	bootstrap:238

I can't seem to find this in the docs, but is it possible to route with a '*' wildcard that acts as a middleware?

Example:

const routes = mount({
    '/login': route({
        view: <div>Login</div>,
    }),
    '/': redirect('/login'),
    '*': map((req, { user }) => (user ? protectedRoutes : redirect(req.originalUrl))),
});

I have been trying to import navi directly from unpkg and have come across a few errors:

1. If you request https://unpkg.com/[email protected]?module then this error appears:

Apparently this is related to webpack https://github.com/webpack/webpack/issues/8838

2. If you specify the exact file https://unpkg.com/[email protected]/dist/es/index.js then the above error disappears but then this error appears:

Apparently this is to do with navi having history as an optional dependency (for interoperability with react-router). Solving this issue is likely to negate issue 1.

In scrollToHash function window.scroll method is called with options object. Unfortunately, this syntax is not supported by IE, Edge, Safari and older versions of Chrome (MDN docs), which only support the old syntax, i.e. window.scroll(x-coord, y-coord).

Top 3 JS errors on our site reported by TrackJS are caused by this issue :/ Unfortunately some browsers that don't support it don't throw any error and simply scroll to 0, 0, but e.g. older versions of Chrome (e.g. 55, even though it should work according to MDN) throw the following error:

Failed to execute 'scroll' on 'Window': No function was found that matched the signature provided.

Hi,

Is it possible to throw a 404 error from the client side?

I was trying something like this:

throw new NotFoundError(request.originalUrl);

But the NotFoundBoundary does not come up.

I'm trying authenticated routes with permissions. I'm following a similar method explained in here: https://frontarm.com/navi/en/guides/authenticated-routes/#setting-authentication-state

On wildcard stage, I use a method to authorize routes by comparing required permissions to access the route against permissions that the logged in user have to have more granular control over every route.

export default mount({
  '*': map((request, context) => {
    const { authService, } = context;
    if(!authService.currentUser) {
      const originalUrl = encodeURIComponent(request.originalUrl);
      return redirect(
        `${routeRegistry.login.path}?redirectTo=${originalUrl}`,
        {exact: false,}
      )
    }

    const route = RouteAuthorizer(request, authService.currentUser);
    if (route) {
      return mount(route);
    }
  }),
  [routeRegistry.root.path]: redirect(routeRegistry.login.path),
  [routeRegistry.login.path]: mount(routes[routeRegistry.login.path].route),
});

I have all the routes listed and I use a separate method to authorize routes.

// routes authorizer
export default (req, userObj) => {
  const { path, } = req;
  const { route, permissions, } = Routes[path];
  if (permissions && permissions.length > 0) {
    if (!(userObj && isAuthorized(userObj.abilities, permissions))) {
      return null;
    }
  }
  return {
    [path]: route,
  };
};

// Routes registry
export default {
[routeRegistry.courses.path]: {
    permissions: routeRegistry.courses.permissions,
    route: route({
        title: 'Your courses',
        view: <Courses/>,
    }),
  },
  [routeRegistry.courses.courseDetail.path]: {
    permissions: routeRegistry.courses.courseDetail.permission,
    route: route({
      title: 'Specific course',
      view: <Course/>,
    }),
  },
  ...
}

The issue I'm facing is when I'm trying to navigate to a page while it's parent route is already being mounted.

Ex: I'm trying to access courses/1 but courses/ is already mounted. So instead of going through the wildcard it jumps straight into courses/ route.

Is there a way for me to force each path as unique?

Or do you have a different pattern you use to achieve the same functionality?

I'm trying out Navi on a ReactJS application that has a bit complex routing system. What I'm doing right now is having a wildcard route, and then do necessary permissions checks and then mount routes based on the checks.

'*': map((request, context) => {
    const { authService, } = context;
    if(_.isEmpty(authService.currentUser)){
      const originalUrl = encodeURIComponent(request.originalUrl);
      return redirect(
        `${routeRegistry.login.path}?redirectTo=${originalUrl}`,
        {exact: false,}
      )
    }
    if(!authService.currentUser.name) {
      return getLoginRoutes();
    }
    return getAuthenticatedRoutes();
  })

const getAuthenticatedRoutes = () => {
  return mount({
    [routeRegistry.dashboard.path]: ...
  })
};
const getLoginRoutes = () => {
  return mount({
    '/': ...
  })
};

But with this approach I'm unable to unmount routes if the user loses permissions (when logging out).

Do you have an example similar to what I'm trying to do right now?

At first let me tell you that I think you made a truly amazing job with this library, I prefer it to React router by far.

While I was playing around I encountered the issue you are describing under the docs Delaying render until authentication section and while you explained one possible way to fix it, I thought I would share the one I found.

I basically didn't like too much the idea of rendering the router before knowing the authentication state and felt like passing an isAuthenticationStateKnown prop to the context was a bit hacky as to me routes shouldn't be aware of the authentication state at all.

Instead I came up with the following solution:

export default function App() {
  // Custom hook that handles current user authentication state
  const [currentUser, setCurrentUser, authenticationStateIsUnknown] = useAuthentication()

  // Don't render anything until we know user authentication state
  // Could instead render a spinner or something indicating that the app is loading here
  if (authenticationStateIsUnknown) {
    return null
  }

  return (
    <Router routes={routes} context={{ currentUser, setCurrentUser }}>
      <Suspense fallback={null}>
        <View />
      </Suspense>
    </Router>
  )
}

As you can see, the useAuthentication() custom hook returns a authenticationStateIsUnknown boolean which we can use to determine whether to render the router or not.

I won't share my custom hook code here as it is too business specific but its implementation is fairly trivial.

Feel free to tell me what you think of this solution as I might be disregarding concerns that come along with it. I thought the docs should probably show a self-contained authentication example that doesn't require the routes to handle any transitional state.

I have web app which instead of rendering "not found" page redirects to home page.

Example code: https://frontarm.com/demoboard/?id=1f95147d-e713-4d80-a22a-af880c6810f2

I'm trying to do it this way:

function renderNotFound() {
  return (
    <NavHistory>{(history) => history.push('/about')}</NavHistory>
  )
} 

// [...]
<NavNotFoundBoundary render={renderNotFound}>
  <NavContent />
</NavNotFoundBoundary>

and it works correctly when my page's getContent() returns content immediately, but when I try to redirect to async page

'/about': Navi.createPage({
      title: 'The createSwitch() function',
      getContent: () => import('./about.mdx'),
    }),

it fails with following errors in console:

Uncaught Error: URL not found: /abc/
    at createNotFoundSegment (VM168 navi.js:322)
    at class_1.NodeMatcher.getResult (VM168 navi.js:363)
    at class_1.SwitchMatcher.execute (VM168 navi.js:872)
    at class_1.NodeMatcher.getResult (VM168 navi.js:356)
    at RouteObservable.refresh (VM168 navi.js:1336)
    at RouteObservable.handleChange (VM168 navi.js:1321)
    at RouteObservable.subscribe (VM168 navi.js:1359)
    at CurrentRouteObservable.handleURLChange (VM168 navi.js:1256)
    at CurrentRouteObservable.refresh (VM168 navi.js:1180)
    at new CurrentRouteObservable (VM168 navi.js:1164)
The above error occurred in the <InnerNavContent> component:
    in InnerNavContent (created by Context.Consumer)
    in NavContent (created by Context.Consumer)
    in InnerNotFoundBoundary (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in main (created by Context.Consumer)
    in div (created by Context.Consumer)
    in NavLoading (created by App)
    in Suspense (created by NavProvider)
    in NavProvider (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, InnerNotFoundBoundary.

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (VM167 react-dom.development.js:49)
    at scheduleWork (VM167 react-dom.development.js:18530)
    at Object.enqueueSetState (VM167 react-dom.development.js:12437)
    at NavProvider.Component.setState (VM166 react.development.js:460)
    at Object.NavProvider._this.handleNavigationSnapshot [as next] (VM173 react-navi.js:335)
    at MapObserver.next (VM168 navi.js:1963)
    at CurrentRouteObservable.handleURLChange (VM168 navi.js:1226)
    at VM168 navi.js:1163
    at listener (VM171 history.js:878)
    at VM171 history.js:897

The above error occurred in the <Context.Consumer> component:
    in NavHistory (created by InnerNotFoundBoundary)
    in InnerNotFoundBoundary (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in main (created by Context.Consumer)
    in div (created by Context.Consumer)
    in NavLoading (created by App)
    in Suspense (created by NavProvider)
    in NavProvider (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (VM167 react-dom.development.js:49)
    at scheduleWork (VM167 react-dom.development.js:18530)
    at Object.enqueueSetState (VM167 react-dom.development.js:12437)
    at NavProvider.Component.setState (VM166 react.development.js:460)
    at Object.NavProvider._this.handleNavigationSnapshot [as next] (VM173 react-navi.js:335)
    at MapObserver.next (VM168 navi.js:1963)
    at CurrentRouteObservable.handleURLChange (VM168 navi.js:1226)
    at VM168 navi.js:1163
    at listener (VM171 history.js:878)
    at VM171 history.js:897

Find out more about deployment here:

  https://bit.ly/CRA-deploy

navi-scripts: Using config at C:\Users\forge\Documents\GitHub\navi.config.js
[ohshit] An error occured while building your app
Couldn't find window.NaviScripts - did you call register()?
Error: Couldn't find window.NaviScripts - did you call register()?
    at crawl (C:\Users\forge\Documents\GitHub\node_modules\navi-scripts\lib\crawl.js:22:15)
    at build (C:\Users\forge\Documents\GitHub\node_modules\navi-scripts\lib\build.js:9:32)
    at Command.<anonymous> (C:\Users\forge\Documents\GitHub\node_modules\navi-scripts\bin\navi-scripts.js:89:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I don't know why this is not resolved yet and no one is following up, but I want to bring this issue to the light again:

To reproduce this error just use any node version >= 12 and this error will encounter during the build phase.

Related to: https://github.com/frontarm/navi/issues/92 https://github.com/frontarm/navi/issues/83

Similar to #190.

When using the traditional forward/back buttons, the scroll position is preserved. If you scroll down, click a link, and then go back, you won't end up back at the top of the page.

Because it emulates the forward/back buttons, Navi should also preserve scroll position when going forward and back.

Hi, I was trying out the Navi TS blog example and as soon as I ran yarn start I got this:

navi/my-blog/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts
TypeScript error in /Users/erick/Documents/spark-analytics/navi/my-blog/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2978,14):
Duplicate identifier 'LibraryManagedAttributes'.  TS2300

    2976 |         // We can't recurse forever because 'type' can't be self-referential;
    2977 |         // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa
  > 2978 |         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
         |              ^
    2979 |             ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
    2980 |                 ? ReactManagedAttributes<U, P>
    2981 |                 : ReactManagedAttributes<T, P>

Any idea why?

Cheers!

The plus-character is not getting decoded when used in the query string, but is instead passed on as-is in query parameters in request.params.

An example of a query string that uses plus signs is the default Github issues search query: https://github.com/frontarm/navi/issues?q=is%3Aissue+is%3Aopen+

See:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent#Decoding_query_parameters_from_a_URL
• https://stackoverflow.com/questions/18717557/remove-plus-sign-in-url-query-string