How to use the createLocation function from history

Find comprehensive JavaScript history.createLocation code examples handpicked from public code repositorys.

Creates a new history location object with a specified path, query parameters, and state.

278
279
280
281
282
283
284
285
286
287
export function Redirect(_ref){ 
  const to = _ref.to

  return React.createElement(context.Consumer, null, function (context) {
    const method = context.history.replace
    const location = history.createLocation(computedMatch ? typeof to === "string" ? generatePath(to, computedMatch.params) : _extends({}, to, {
      pathname: generatePath(to.pathname, computedMatch.params)
    }) : to);  // 路由重定向到to 的地址
    return React.createElement(Lifecycle, {
      onMount: function onMount() {
fork icon0
star icon6
watch icon0

+ 7 other calls in file

317
318
319
320
321
322
323
324
325
return React.createElement(context.Consumer, null, function (context$$1) {
  !context$$1 ? invariant(false, "You should not use <Redirect> outside a <Router>") : void 0;
  var history$$1 = context$$1.history,
      staticContext = context$$1.staticContext;
  var method = push ? history$$1.push : history$$1.replace;
  var location = history.createLocation(computedMatch ? typeof to === "string" ? generatePath(to, computedMatch.params) : _extends({}, to, {
    pathname: generatePath(to.pathname, computedMatch.params)
  }) : to); // When rendering in a static context,
  // set the new location immediately.
fork icon0
star icon0
watch icon1

+ 5 other calls in file

How does history.createLocation work?

The history.createLocation function is part of the history package for JavaScript, and is used to create a new location object that represents a specific URL location. This function takes an options object with the following properties: pathname: A string representing the path of the location. search: A string representing the query parameters of the location. hash: A string representing the hash fragment of the location. state: Any serializable data associated with the location. The function returns a new location object that has all of the provided options properties, as well as the following additional properties: key: A unique identifier for the location, generated by the history package. searchParams: An object representing the parsed query parameters of the location. toString(): A function that returns a string representation of the location. The history.createLocation function is commonly used with the history.push and history.replace functions to programmatically navigate to a new location in a single-page application.

329
330
331
332
333
334
335
336
337
338
return React.createElement(Lifecycle, {
  onMount: function onMount() {
    method(location);
  },
  onUpdate: function onUpdate(self, prevProps) {
    var prevLocation = history.createLocation(prevProps.to);

    if (!history.locationsAreEqual(prevLocation, _extends({}, location, {
      key: prevLocation.key
    }))) {
fork icon0
star icon0
watch icon0

+ 7 other calls in file

3134
3135
3136
3137
3138
3139
3140
3141
3142
3143
3144
3145


var resolveToLocation = function resolveToLocation(to, currentLocation) {
  return typeof to === "function" ? to(currentLocation) : to;
};
var normalizeToLocation = function normalizeToLocation(to, currentLocation) {
  return typeof to === "string" ? history.createLocation(to, null, null, currentLocation) : to;
};


var forwardRefShim = function forwardRefShim(C) {
  return C;
fork icon0
star icon0
watch icon0

+ 9 other calls in file

Ai Example

1
2
3
4
import { createLocation } from "history";

const location = createLocation("/users", "?page=2", { userId: 123 });
console.log(location);

In this example, we are using createLocation to create a new location object that represents the URL /users?page=2 with an additional state object of { userId: 123 }. The console.log statement will output the following location object: javascript Copy code

188
189
190
191
192
193
194
195
196
197
    rest = _objectWithoutPropertiesLoose(_this$props, ["innerRef", "replace", "to"]); // eslint-disable-line no-unused-vars


return React.createElement(reactRouter.__RouterContext.Consumer, null, function (context) {
  !context ? invariant(false, "You should not use <Link> outside a <Router>") : void 0;
  var location = typeof to === "string" ? history.createLocation(to, null, null, context.location) : to;
  var href = location ? context.history.createHref(location) : "";
  return React.createElement("a", _extends({}, rest, {
    onClick: function onClick(event) {
      return _this.handleClick(event, context.history);
fork icon0
star icon0
watch icon0

216
217
218
219
220
221
222
223
224
225
var AsyncRender = require('react-async-render');
var {createLocation} = require('history');

//Typical usage with react-router for server side rendering
app.use('/', function(req, res){
  var location = createLocation(req.url);
  match({ routes, location }, (error, redirectLocation, renderProps) => {
    if (redirectLocation){
      res.redirect(301, redirectLocation.pathname + redirectLocation.search);
    }
fork icon0
star icon0
watch icon1

+ 9 other calls in file