react-router-dom : updates url but does not render the new component

Question

I am a bit lost with this issue for a whole day. On button click the url changes but does not render the new page and I don't understand why.

I am using react-dom-router 5.2.0

                       INDEX JS

 import {Router} from 'react-router-dom';
 import history from './history';

ReactDOM.render(
  <React.StrictMode>
    <Router history={history}>
      <App />
    </Router>
</React.StrictMode>,
  document.getElementById('root')
);

                           APP JS

import Server from './Server';
import React from 'react';

function App() {
  return (

   <Server />

  );
}

export default App;

                           SERVER JS

export default class Server extends Component
{
render()
    {


        return(


            <div className="Homepage" >

                <h1 className="header">Server</h1>



                     <button  className="button" 
                    onClick={() => history.push('/control')}>
                            Lets go
                    </button>

                }

      </div>

        );  
    }
}

Please Note : I added <Control/> directly in the render method above and it renders the component all well .

                        CONTROL JS

import React, {Component} from 'react';
import Page2_View from './Page2_View';

export default class Control extends Component
{
    constructor(props)
    {
        super(props);
    }

    render()
    {
        return(

            <Page2_View/>

        );


    }

}

                    Page2_View

import React, {Component} from 'react';

const Page2_View = (props) =>
{
    return(

        <h1> PAGE 2 VIEW </h1>

    );
}

export default Page2_View;

         ROUTES JS

import {BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
const Routes = () =>
{
    return(

            <Router>
                <div>
                    <Switch>
                        <Route exact path="/test" component={Server}/>
                        <Redirect from = '/test' to = '/control'/>
                        <Route exact path="/control" component={Control}/>
                    </Switch>
            </div>
            </Router>

    );

}

export default Routes;

                          HISTORY JS

import {createBrowserHistory as history} from 'history';

export default history();

I appreciate all the help. Thank you

score 0 · Answer 1 · answered May 21 '20 at 07:35

I think the problem is that react-router-dom is not aware of this history.push('/control') you're doing; i.e. if you want to redirect to another route, it should be through react-router, not outside of it.

You have a few options:

Use the useHistory hook: https://reacttraining.com/react-router/web/api/Hooks/usehistory
Your button could be wrapped in a Link component: https://reacttraining.com/react-router/web/api/Link
Get the router through props with the withRouter component, as explained in: Programmatically navigate using react router V4.

score 0 · Accepted Answer · answered May 22 '20 at 03:55

I have realized what I was doing wrong and was able to solve my issue.

The key was to understand that the Router module from react-router-dom comes with three props : path , history, and component.

So in order to redirect a page on button click all I had to do embed all my Routes between tag in the App.js

                     APP JS
function App() {
  return (
  <Router>
        <Switch>
            <Route exact path="/test" component={componentA}/>
            <Route exact path="/test2" component={componentB}/>

        </Switch>
</Router>

  );
}

export default App;

And then you can use button onClick to redirect

                               COMPONENTA JS
<button variant="secondary" 
                        className="button" size="lg" 
                        onClick={() => this.props.history.push('/test2')}>
                         RedirectTo
                     </button>

Hope this will be helpful to others who come across this!

Bachi · Answer 3 · 2020-05-22T04:44:25.567

In server.js file instead of button use navlink or link from reactrouter below is a saple code

 <NavLink to="/control">control</NavLink>

Import every component to routing component then use router switch and redirect statements like below

import Main from './component/Main'
import Welcome from "./component/welcome"

import { Route, BrowserRouter as Router, Switch,Redirect } from 'react-router-dom'

function App() {
return (
<Router>
<Switch>

  <Redirect from="/" to="/home" exact />
  <Route exact path="/home" component={Main} />
  <Route path="/welcome" component={Welcome} />

</Switch>
</Router>
);}

export default App;

and in your component where you re clicking import link or nav link i prefer using navlink and use it to redirect to page on click

import { NavLink } from 'react-router-dom'

 <NavLink to="/home">home</NavLink>

react-router-dom : updates url but does not render the new component

3 Answers3