Is it possible to create a global history file to manage the createBrowserHistory() on react-router-dom v5?
I know the V5 has the useHistory() as a way to get the history. But is it possible to retrieve the history from anywhere, like for cases where I am not using a function component?
On V4 I could create a file history.js:
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
It works on V4
https://codesandbox.io/s/react-router-v4-nfwr0
It doesn't work on V5 - It updates the URL but redirects to not-found
https://codesandbox.io/s/react-router-v5-not-working-jlrep
As the doc says you should use the v4 of history to work on react-router v5.
https://github.com/ReactTraining/history
Documentation for version 4 can be found on the v4 branch. Version 4 is used in React Router versions 4 and 5.
I solved this by doing this.See what i done
Create a file like before
This is the code
import {createBrowserHistory} from 'history';
import store from 'store';
export default createBrowserHistory({
basename: store ? store.getState().productionBaseUrl : ''
});
The reason why i import Redux is the project does not pulish on nginx root folder.So i should add a basename.If you do not neet it,you can remove it.
Then you can use it in your own coponnet. How to use? Let me show your the code.
// if my history in src/router/
import history from 'router/history';
history.push(`${your router address}`)
Attention
The history's push method can pass an object like the origin props.But it's refresh when in the child router always. So pass a string when use it.
Related
import { ConnectedRouter } from 'connected-react-router/immutable';
import { BrowserRouter as Router,} from 'react-router-dom';
i need to know difference between above both of them.
ConnectedRouter is to be used with Redux and can synchronize router state with a Redux store.
BrowserRouter is the 'standard' React router for the browser, to keep the UI in sync with the current URL.
The main difference in connected-react-router/immutable in is that history is stored in redux as immutable object so you can timetravel your history any time in the redux-life of the application.
This question already has answers here:
Programmatically Navigate using react-router
(9 answers)
Closed 5 years ago.
I´ve checked the following post and although it gives several different solutions not of them seens to solve my problem.
Using react-router V4 I need to programatically navigate from components deep insider my tree that will not have access to router props passed (history, url, params, etc.). What is the most straightfoward way of doing it ?
Any component in your tree, irrespective of its depth, can get access to the history, location and match props which are used by react-router. To do this you have to wrap the component in the withRouter HOC provided by react-router.
Code:
//other imports
import {withRouter} from 'react-router-dom'
//define component MyComponent here
export default withRouter(MyComponent);
Inside MyComponent defined above, you can access the history prop and redirect to any new url by using this.props.history.push(newURL); You can find more information at https://reacttraining.com/react-router/web/api/withRouter
The most straight forward way is to move history into separate file like so
history.js:
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
export default history
and then in any other component:
import history from 'path/to/history.js'
...
someFoo(){
history.push({
pathname: '/new/url',
})
}
...
You also need to make sure you pass new history to your router to make it work
Wondering how to go back to a previous route in a react web app using hashRouter instead of browserRouter in react-router v4?
I've found this question which doesn't seem to work even though it says no browser mixin needed (plus I think its talking about an older react-router version) however, every other solution I've seen depends on browserHistory.
Is it possible with hashHistory?
this.props.history.goBack()
Taken from the comments on this question
It is a function call.
Well in my case i did like that :
import withRouter from "react-router-dom/es/withRouter";
import React from "react";
class Component extends React.Component {
goBack() {
this.props.history.go(-1);
}
...
}
const WrappedComponent = withRouter(Component)
export default WrappedComponent;
withRouter give us access to history in props of component, but i'm not sure is this way is correct
I've updated react-router to the latest version - 2.4.1
I use hashHistory in my app
import { Router, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
// useRouterHistory creates a composable higher-order function
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
<Router history={appHistory}/>
And now I'm getting an error
Warning: Using { queryKey: false } no longer works.
Instead, just don't use location state if you don't want a key in your URL query string
How can I fix this?
I don't want additional query key to appear in url. I expect the same behaviour as from angular router or backbone router.
This warning does not actually originate from React Router but the history module it uses. In fact, the latest version (3.0.0, May 30 2016) doesn’t work at all with React Router:
Uncaught Invariant Violation: You have provided a history object created with history v3.x. This version of React Router is not compatible with v3 history objects. Please use history v2.x instead.
This warning is present as of v2.5.1 (Jun 24 2016).
So the easiest solution is to just use the same version React Router uses, courtesy of its package.json:
"history": "^2.0.1"
After that, the queryKey option works as expected.
You can use const history = useRouterHistory(createHashHistory)(); but then the refresh or back button will result in white page. It works very similar to browserHistory which requires mod_rewrite or middleware to function properly.
Maybe someone knows why they changed it like this because for me it doesn't make sense.
This worked for me
const appHistory = useRouterHistory(createHashHistory)();
I'm configuring react-boilerplate to start a project on it.
Our dev environment publishes "dev" versions of the app in sub paths, for example: example.org/test/project-name
Then, when we publish the project, it stays on example.org/
I'd like to use the browser history (HTML5 API) and not the hash history. But this means that I have to set the basename of React Router to match the current environment.
Right now, I'm trying to set up a static basename in this way:
const browserHistory = useRouterHistory(useBasename(createHistory))({
basename: '/test/project-name',
});
const store = configureStore(initialState, browserHistory);
But when I run the application, the homepage is still at / instead of /test/project-name/.
So, the questions are:
What am I doing wrong?
How would you make the basename match the current environment?
The answer is in the react-router documentation:
Be aware that useRouterHistory already pre-enhances your history factory with the useQueries and useBasename enhancers from history.
import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'
const history = useRouterHistory(createHistory)({
basename: '/base-path'
})