history.push 和 Link 更改 URL 并且如果我有多个相同组件的路由，则不重新渲染组件

Question

// the routes here
<Switch>
     <Route exact path='/:page' component={Dashboard} />

      <Route exact path='/:subCateg/:categ' component={Dashboard} />
</Switch>

I want to go from the first route to the second one, if I used (history.push) or (Link) just the URL change and not reloading.

Also, the same problem if I want to go from the second route to itself but with new params.

//here I'm in Dashbord and the History also pushing to Dashboard
onClick={
        ()=>{
            history.push({pathname:`/${categ}/${subCateg}`, state: {id: subCateg.id}})
                                    // window.location.reload(false);
            }
        }

as you can see I userd "window.location.reload(false);" and it solved the loading problem, but what if I want to Goback by browser Goback button, the same problem: change URL & not relaoding. also I think using "window.location.reload(false);" is not a good practice.

`` package.json: "react-router-dom": "^5.1.2",

Answer 1

As you are using react-router-dom you should not be using history.push(). Try to use Redirect from react-router-dom instead.

Just use a state named redirect and set it to the new route you want to go with your function:

onClick={() => this.setState({ redirect: 'newpath' }};

Then just put a return inside your render just like this:

if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />;
}
return (
    ...rest of your render
);

Answer 2

Caveat: I'm dangerously new to React as well as much around it, but have been pulling my hair out on this for the last day myself. So there are a number of reasons this may be very bad advice. But this was my situation and how I got it to work.

function newSongRedirect() {
    history.push("/SongDetail/0");
    history.go(0);
}

and hook it up to my button:

<button onClick={() => newSongRedirect() } >New Song</button>

It appears that history.push adds the value to the history, but doesn't cause it to be acted on. As now the first item, history.go(0) then causes it to act on it.

I've seen some posts referencing that history.push can't be used if you're nested in a <BrowserRouter> , but in my case, attempting to replace that in my index.js just led to other issues.

Also, I found this post from what looks to be part of the team working on react router. It seems the useHistory hook will be replaced when they get a chance.

Heads up: The useHistory hook is a quick stopgap for a future hook that we are working on: useNavigate. useNavigate will provide an API that is more closely aligned with and will fix a few long-standing problems with using the history API directly in the router (it'll probably look a lot like @reach/router's navigate API). We are providing useHistory for now to make the migration of existing code that uses the history API as painless as possible.