10 examples of 'react router history state' in JavaScript

Every line of 'react router history state' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
13getState() {
14 const path = window.location.pathname;
15 return path ? path : '/';
16}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

182function getState() {
183 return routerState
184}
4export default function router(state, action) {
5 if (action.type !== 'ROUTER') {
6 if (state) {
7 return state;
8 } else {
9 return {
10 // default content
11 routerStack: [HomeContent],
12 canPop: false,
13 };
14 }
15 }
16 let newState = Object.assign({}, state);
17 switch (action.state) {
18 case 'PUSH':
19 for (let i = 0;i < newState.routerStack.length;i++) {
20 if (newState.routerStack[i] == action.payload) {
21 let t = newState.routerStack[i];
22 newState.routerStack[i] = newState.routerStack[newState.routerStack.length - 1];
23 newState.routerStack[newState.routerStack.length - 1] = t;
24 return newState;
25 }
26 }
27 newState.routerStack.push(action.payload);
28 if (newState.routerStack.length > 1) {
29 newState.canPop = true;
30 }
31 return newState;
32 case 'POP':
33 if (newState.routerStack.length > 1) {
34 newState.routerStack.pop();
35 }
36 if (newState.routerStack.length > 1) {
37 newState.canPop = true;
38 } else {
39 newState.canPop = false;
40 }
41 return newState;
42 default:
43 return newState;
44 }
45}
5export function useHistory() {
6 let pathname = getPathname();
7 let [state, setState] = useState({ pathname });
8
9 useEffect(() => {
10 function handler() {
11 let pathname = getPathname();
12 setState(state =>
13 state.pathname != pathname ? { pathname } : state
14 );
15 }
16 return subscribe(handler);
17 }, []);
18 return [pathname, redirect];
19}
9export default function Router() {
10 const [current, setCurrent] = useState('home')
11 useEffect(() => {
12 setRoute()
13 window.addEventListener('hashchange', setRoute)
14 return () => window.removeEventListener('hashchange', setRoute)
15 }, [])
16 function setRoute() {
17 const location = window.location.href.split('/')
18 const pathname = location[location.length-1]
19 console.log('pathname: ', pathname)
20 setCurrent(pathname ? pathname : 'home')
21 }
22 return (
23 <HashRouter>
24 <Nav current={current} />
25 <Switch>
26 <Route exact path='/' component={Main} />
27 <Route path='/admin' component={Admin} />
28 <Route path='/profile' component={Profile} />
29 <Route component={Main} />
30 </Switch>
31 </HashRouter>
32 )
33}
39getPath(): string {
40 return this.CURRENT_PATH;
41}
92static getDerivedStateFromProps({ match, resolver, matchContext }, state) {
93 if (state.isInitialRender) {
94 return { isInitialRender: false };
95 }
96
97 if (
98 match !== state.match ||
99 resolver !== state.resolver ||
100 !isEqual(matchContext, state.matchContext)
101 ) {
102 return {
103 match,
104 resolver,
105 matchContext,
106 iteration: state.iteration + 1,
107 };
108 }
109
110 return null;
111}
17function useRoutes(createHistory) {
18 warning(
19 false,
20 '`useRoutes` is deprecated. Please use `createTransitionManager` instead.'
21 )
22
23 return function ({ routes, ...options } = {}) {
24 const history = useQueries(createHistory)(options)
25 const transitionManager = createTransitionManager(history, routes)
26 return { ...history, ...transitionManager }
27 }
28}
21function useRoutes(createHistory) {
22 process.env.NODE_ENV !== 'production' ? warning(false, '`useRoutes` is deprecated. Please use `createTransitionManager` instead.') : void 0;
23
24 return function () {
25 var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
26
27 var routes = _ref.routes;
28
29 var options = _objectWithoutProperties(_ref, ['routes']);
30
31 var history = useQueries(createHistory)(options);
32 var transitionManager = createTransitionManager(history, routes);
33 return _extends({}, history, transitionManager);
34 };
35}
7export function Router({ children }) {
8 let [pathname] = useHistory();
9 let nextChild;
10 let nextParams;
11
12 children = useMemo(() => toList(children), [children]);
13
14 let length = children.length;
15
16 for (let i = 0; i < length; i++) {
17 let child = children[i];
18 let props = child.props;
19 if (props.path) {
20 let [inRoute, params] = match(child.props.path, pathname);
21 if (inRoute) {
22 nextChild = child;
23 nextParams = params;
24 break;
25 }
26 }
27 if (child.props.default) {
28 nextChild = child;
29 }
30 }
31
32 if (nextChild) {
33 let { type, props } = nextChild;
34 let nextProps = { ...props, params: nextParams };
35 delete nextProps.path;
36 delete nextProps.default;
37 return createElement(type, nextProps);
38 }
39}

Related snippets