@lxjx/react-transition-route v0.2.2

Feature

• Routing animations are managed separately by <Route>, which are more controllable and perform better (as opposed to <Switch key={location.key}>{...}</Switch>, which will be Replace the component tree, whether it is a child route or a parent route!)
• Built-in fade and slide animation types for primary and secondary routing
• Pass keepAlive cache route
• Routing change listeners, you can pass in additional data in the following way, then subscribe to the specified method or receive them in the routing component

<Route path="/about" component={About} meta={{name: 'lxj', age: 'xxx'}} />

demo

Usage

yarn add @lxjx/react-transition-route;

import { HashRouter } from 'react-router-dom';
import { EnhanceRoute as Route, change, WrapRouter } from '@lxjx/react-transition-route';

import Home from "./view/home";
import About from "./view/about";
import User from "./view/user";
import Detail from "./view/detail";

// Receive additional props passed to Route when a single route changes
change.subscribe = function (routeDatas) {
  console.log(routeDatas);
}

// handle 404
function onPageNotFound(history, url) {
  // history.replace('/not-found?url=' + url);
}

function App() {
  return (
    // !!do not use the Switch component. EnhanceRoute depends on the prop.children of the Route component. Using the Switch causes the animation cache to fail.
    <HashRouter>
      <WrapRouter onNotFound={onPageNotFound}>
      	// upport for any Route prop except for render prop and children prop
        <Route path="/" component={Home} exact />
      	// The extra prop will be passed to the change.subscribe subscription function and the rendered routing component.
        <Route path="/about" component={About} meta={{name: 'lxj', age: 'xxx'}} />
		// Passing child will use right-slide as a route animation
        <Route path="/user" child component={User} />
        // When the routing component leaves, it will not be uninstalled. Instead, simply enable display:none to hide, which can preserve page state, list data, scroll position, etc.
        <Route path="/List" keepAlive component={List} />
        <Route path="/not-found" component={NotFound} />
      </WrapRouter>
    </HashRouter>
  );
}

!important

You must ensure that the routing components are out of the normal document flow, otherwise they will interfere with each other. It is recommended to use the following:

// The WrapRouter component contains the following styles
.bk-router-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
// Add the following class name to each page-level component, let its width and height expand according to the package class .bk-router-wrap
.page {
  position: absolute;
  // 拉伸至页面宽高
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

const Home = () => <div className="page">Home</div>

// When the page needs to be offset by a certain distance, such as the presence of a footbar, the following settings
const About = () => <div className="page" style={{ bottom: 50 }}>About</div>

For any single-page application, it is recommended to set the above class name on the page-level component wrapper element to prevent confusion of the document flow and no need to care about the width and height of html, body, #root and other elements.

Another advantage of this is that each page maintains its own scrollbars instead of using window-level scrollbars, which can easily cause confusion. Subpage scrolling affects the scroll position of the parent page, even in modal. Scrolling affects the scroll position of the page.

bonus

When there is a query query, use query-string internally to automatically convert the query parameters for the routing component and hook it to match.query, you can use it directly without additional conversion.

// /user?name=lxj&age=25

// route component
props.match.query // => { name: 'lxj', age: 25 }