How to use history library and in React

Question

I'm a beginner with React-Redux, and I had a question of how to use history and the Link tag in order to push to a certain location.

I wanted to be able to use history.push in my actions, so I used the history JS library. I created a history.js file in my app folder:

src/history.js

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

I then imported the history object into my App.js, and had my routes placed within a Router tag with history:

src/App.js

<Router history={history}>

      <Switch>
        <Route path="/loginscreen" component={Loginscreen} />
        <Route path="/login" component={Login} />
        <Route path="/Property-Assistant-2018/profile" component={Profile} />
        <Route path="/Property-Assistant-2018/properties" component={Property} />
        <Route path="/Property-Assistant-2018/detail/:id" render={(props)=><PropertyDetail{...props}/>} />
        <Route path="/Property-Assistant-2018/new_property" component={NewProperty} />
        <Route path="/Property-Assistant-2018/register" component={Register} />
        <Route path="/Property-Assistant-2018/contact" component={Message} />
        <Route path="/Property-Assistant-2018/edit_property/:id" render={(props)=><EditProperty{...props}/>}/>
        <Route path="/Property-Assistant-2018" component={Initial} />

      </Switch>

However, now my Link tags in my nav bar do not work. When I click on them, they just stay at the inital homepage. I tried adding a second set of Switch routes, to see if I can hardcode it and figure out what was going on, but that made the homepage appear stacked on top of the Link route page.

src/App.js

<Link to="/Property-Assistant-2018/contact">Contact</Link>

So my question is, how can I use history and Link tags at the same time? I know history is included with React-Router v.4, and I've been using this, but I can't use it for my actions.

It's probably a simple fix, so thank you for helping me with this issue.

Did you add something like `var history = createBrowserHistory();` before you started using history? — Pat Mellon, May 22 '18 at 20:53

Diego Flores · Answer 1 · 2018-05-23T14:40:31.927

2

I figured out the issue:

I have to wrap the entire App div with the Router tag.

<Router history={history}>
  <div className="App">
  </div>
</Router>

This is part of an answer from this StackOverflow question: How to push to History in React Router v4?

edited May 23 '18 at 14:40

answered May 22 '18 at 21:04

Diego Flores

113
2
10

score 0 · Answer 2 · answered May 12 '21 at 23:29

can you show the code

const history = useHistory();
useEffect(() => {
    console.log('moved')
}, [history]);

i have this for every url change but with the <Link to={"/somethign"}/> dont work , but when i console log useHistory every second is diferent and useEffect dont detect the change

How to use history library and in React

2 Answers2