The use of useRouter

UseRouter use

const output=useRouter(input);

Copy the code

Input Parameter Input configuration


const others={
  projectKey:'123'};const input={
  browserRouter:false.// browserHistory
  idKey:'path'.// Route key. Such as: url
  childKey:'children'.// Sublevel key. Such as: the children
  beforeRender:() = >{}, // Render before callback function.
  afterRender:() = >{}, // Render the callback function.
  basepath:' '.// Route prefix.
  routers: []./ / the routing table
  store:() = >{}, // State management
  inputPath:' '.// Initialize the route
  inputParams: {},// Initialize parameters
  / / global
  title:'test'.// page title.
  errorBoundary:null.// Error bounds. Error boundary handling is available by default and can be customized.
  loading:null.// Load effect. Default loading effect, can be customized.
  exact:false.// Absolute path. others,// Other configurations
};

Copy the code

The reference output

const {
  // Subscribe to publish
  eventBus:{
    on,
    emit,
    off,
  },
  // Route jump
  router:{
    push,
    replace,
  },
  // State management
  store:{
    getState,
    setState,
    subscribe,
  },
  updateRouter, // Update the route
  output,
  loading,
}=output;

Copy the code

Routing Table Configuration

const routerInput={
  path:' './ / path
  name:' './ / display name
  icon:' './ / icon
  redirect:' './ / redirection
  children: [].// Submenu configuration
  component:' '.// Page component
  denied:false.// Permission control
  hideMenu:false.// Menu hidden display
  resolve:null.Store. GetState (key); store. SetState (state) update.
  loadData:null.// Data request, no cache data.
  // Configure a single route
  title:'test'.// page title.
  errorBoundary:null.// Error bounds. Error boundary handling is available by default and can be customized.
  loading:null.// Load effect. Default loading effect, can be customized.
  exact:false.// Absolute path. others,// Other configurations
};

Copy the code

Parameter entered by the routing component props

const {
  // Subscribe to publish
  eventBus:{
    on,
    emit,
    off,
  },
  // Route jump
  router:{
    push,
    replace,
  },
  // State management
  store:{
    getState,
    setState,
    subscribe,
  },
  updateRouter, // Update the route
  // Browser history
  history:{
    getState,
    back,
    forward,
    go,
  },

  current, // The current route list contains all routes of the parent level
  inputPath, // The path passed in
  path, // Current path
  params, // Page parameters
  name, // Page name
  basepath, // Route prefix
  children, / / child component
  open, // Whether it is enabled
  active, // Whether it is selected
}=routerOutput;

Copy the code

Use the Link

<Link {... props} />Copy the code

The Link attributes

const props={
  to:' '.// Jump path
  onClick, // Click the event. This parameter is not set for events other than jumps.
  preventDefault:false.// Block jump events
  stopPropagation:false.// Prevent bubbling
  exact:true.// Whether it is an absolute path
  children, / / child component. rest,// Other configurations
};

Copy the code

Please refer to the menu code for detailed usage:

The code address