As said before, I’m pretty sure this will always be re-rendered since children changes for every render:

So I think useMemo can simply be removed because it has no effect.

Thank you!

react-dom: ^17.0.2
react-router-dom: ^5.2.0
react-slide-routes: ^0.14.0,

imported all modules

function Home() {
const location = useLocation();

return (

    <Router>
      <AuthProvider>
          <LoaderProvider>

          <UserProvider>

          <ChatProvider>

          <EventProvider>
      <FormProvider>



      <Switch>
          <SlideRoutes location={location}>

          <Route path="/" component={Home} />
          <Route path="/signup" component={Signup} />
          <Route path="/events" component={Events} />
          <Route path="/eventDetails/:id" component={EventDetails} />
          <Route exact path="/user/:id" component={UserProfile} />
          <Route exact path="/user/:id/joined-events" component={JoinedEvents} />
          <Route exact path="/user/:id/created-events" component={CreatedEvents} />
          <Route exact path="/user/:id/create-schedule" component={CreateSchedule} />
          <Route exact path="/user/:id/deposit" component={Deposit} />
          <Route exact path="/user/:id/withdraw" component={Withdraw} />
          <Route exact path="/messages" component={Message} />
          <Route path="/messages/:id" component={Message} />
          </SlideRoutes>

          <div className="home">

          </div>
      </Switch>
      </FormProvider>
        </EventProvider>
              </ChatProvider>

              </UserProvider>
          </LoaderProvider>

      </AuthProvider>

  </Router>

);
}

I'm notice, that using this package with typescript throws warnings :

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Other people have mentioned this issue before but it was closed because no demo was provided, so here it is..

https://codesandbox.io/s/react-slide-routes-forked-xe4ds?file=/src/App.js

It happens when "Redirect" is used.

Hi,
Animation does not work with nested pages from 2nd level onwards for example I have a journey:

Home > Page 1 > Page 5 > Page 6
Home > Page 3
Home > Page 4

and my router looks like:

Here:

• Home calls Page 1 via useNavigate()

• Page 1 calls Page 5 via useNavigate()

• page 5 calls Page 6 via useNavigate()

• Home calls Page 2 via useNavigate()

• Home calls Page 3 via useNavigate()

Animation only works between:

• Home > Page 1
• Home > Page 2
• Home > Page 3

Animation does not work for the second level of the journey onwards

using slide routes causes this error below:

See https://codesandbox.io/s/react-slide-routes-repro-ep9ovo:

Switching between “About” and “Home” goes in the wrong direction.

pathList might be a solution for simple cases, but it’s not sufficient if you have nested routes.

In #22, I wanted to add a way for users to control route order that doesn't rely on a static pathList.

There's a few considerations here:

1. React router allows to generate content dynamically, therefore it might not be possible (or be very memory heavy) to create a static path list
2. The order of Routes has semantic meaning (the first matching one is rendered). I think my PR matches this behavior, so it should always look correct. Might need some unit tests
3. react-router has some additional code for nested routes that I didn't replicate in the PR. That needs to be added to work correctly when using SlideRoutes nested under another *Routes component
4. There's the case that the matched route indices are equal when navigating between two locations that are matched by the same route. My PR didn't handle that case, but we should either allow to specify an undirected transition for that case it just do none instead of an arbitrary directed one.

Also we could allow people to customize transition direction order on top of all that. I'd imagine a function with a signature like the compareFn argument of Array.prototype.sort.

Using react router 5 with 1.1.1 gives the error

Cannot read properties of undefined (reading 'pathname')

Demo:
https://codesandbox.io/s/react-slide-routes-forked-exqniq

我这也没切换为啥方向是反的，首页点进到about页面是从左边滑倒右边，退后的效果。。。

I'd like to be able to specify how far the user needs to drag before the swipe is triggered. Currently even the tiniest drag triggers it.

my fb
https://facebook-ui-zee.vercel.app
in desktop use shift + scroll to slide vertically

We need to use CSSTransition’s nodeRef prop for that.

A SlideRoutes component should work as child/parent of another SlideRoutes component.

When included in a TS project with nested routes, I get this error:

index.js:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SlideRoutes`.
    at SlideRoutes (http://localhost:3000/static/js/vendors~main.chunk.js:44748:23)
    at AllRoutes (http://localhost:3000/main.3a19058650f45f018435.hot-update.js:59:84)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:43746:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:43367:35)
    at div
    at App
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:40659:20)

This would be an alternative use case compared to nested use as implemented in #24. If you want it, we can support both use cases, but I think nested use is more useful, so I’m implementing that first in my PR.

In order to do this, we’d add a prop undirectedAnimation or so and CSSTransition’s key has to be changed to something like this:

const key = undirectedAnimation
  ? relPath  // play transition for nested routes handled by nested `Routes` components
  : next.route.path ?? next.index  // leave things to a nested `SlideRoutes` component

Setting that prop would disable nested use: You would use only one SlideRoutes component which would play an undirected transition for each more deeply nested navigation happening.

So once #24 is merged, we support nested SlideRoutes:

const App = () => (
  <SlideRoutes>
    <Route path="1" element={
      <SlideRoutes animation="vertical-slide">
        <Route path="a" element="/1/a" />
        <Route path="b" element="/1/b" />
      </SlideRoutes>
    }/>
    <Route path="2" element="/2" />
  </SlideRoutes>
)

or if we also implement undirectedAnimation, we would also support one global SlideRoutes component with nested Routes component(s) below it:

const App = () => (
  <SlideRoutes undirectedAnimation="fade">
    <Route path="1" element={
      <Routes>
        <Route path="a" element="/1/a" />
        <Route path="b" element="/1/b" />
      </Routes>
    }/>
    <Route path="2" element="/2" />
  </SlideRoutes>
)

Hi there, @nanxiaobei !
First off, let me congratulate you for this awesome small tool you've developed! It's neat and simple to use.

So far I've found only 1 small issue. It seems the "findDOMNode" method is being deprecated by the React team, in favor of using a direct ref to the element you want to reference, as you can see in the example on that URL.

If you are developing a React app in "Strict Mode" like me, you will be getting a console error when switching from route to route (only the first time):

It sounds like it would be easy to fix, but I don't know. I thought it would be worth just mentioning it.

Cheers

Hi Team,
Love the package.
I use it for the PWA version of our app to slide left/right between 5 main routes in the bottom navbar.
The issue is that I have a slider on one route that allows drag of the handle between min/max values. On touchEnd of the slider it slides to the the previous/left or next/right route depending upon which way the user drag the slider handle of course.
How can I prevent the left/right route swipe and limit the touch to the slider drag when the touch target is the slider?

Functions that v2 normally do work incorrectly in v3

You can watch the smooth running version in v2 in the video below.

You can watch the errors that occurred when I upgraded to v3 without making any changes, in the video below.

export default function Router(): FunctionComponent {
    return (
        <SlideRoutes duration={TimeSpan.milliSecond.threeHundredFifty} destroy={true} timing="ease-in-out" animation="slide">
            <Route index={true} path={NavigationPath.dashboard} element={<Dashboard/>}/>
            <Route path={NavigationPath.conceptSplashPage} element={<ConceptSplash/>}/>
            <Route path={NavigationPath.conceptMainPage} element={<ConceptMainPage/>}/>
        </SlideRoutes>
    );
}