React Router not re-rendering components on click, but works on refresh

Question

I have a left rendered on a Dashboard component, and beside that a placeholder for the currently selected page. The links change the URL as expected e.g. dashnoard/permissions, but the Permissions component is not rendered. It will work if the page is refreshed manually, though. Here is what I'm trying now.

class App extends Component {

  render() {
    return (
      <Router>
        <MultiThemeProvider>
          <div className="App" id="siteWrap">
            <AppBar title="DiversityEDU" />
            <switch>
              <Route exact={true} path="/"  component={Home}/>
              <Route exact={true} path="/login" handler={Login} component={Login}/>
              <Route path="/dashboard" component={Dashboard}/>
            </switch>
          </div>
        </MultiThemeProvider>
      </Router>
    );
  }
}

class Dashboard extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <Router>
        <div id="dashboardWrap" style={style.dashboardWrap}>
          <Sidebar links={links}/>
          <div style={style.dashboardContent}>
            <p>Dashboard has rendered</p>
            <switch>
              <Route exact={true} path="/dashboard/roles" component={Roles}/>
              <Route exact={true} path="/dashboard/permissions" component={Permissions}/>
            </switch>
          </div>
        </div>
      </Router>
    );
  }
}

I am using Redux in this project as well, but not directly in the components above, yet.

const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

you are using `component` and `render` both here: `component={Dashboard} render={() => ()`, use any one and try. — Mayank Shukla, Feb 19 '18 at 12:37
you are using `` in both the files, use only once in `App` file and remove from all other files. — Mayank Shukla, Feb 19 '18 at 12:47
You need a Router only at the top level and not in nested Routes, also check this answer https://stackoverflow.com/questions/44356360/react-router-work-on-reload-but-not-when-clicking-on-a-link/44356956#44356956 — Shubham Khatri, Feb 19 '18 at 12:51
Thank you @MayankShukla. I was using around the s as well, and removing those with no other code changes resolved the issue. — Bryan Potts, Feb 19 '18 at 13:10

score 0 · Answer 1 · answered Jun 02 '18 at 13:40

0

Assign switch to each component route then remove the ={true} from the exact then add exact to dashboard route

answered Jun 02 '18 at 13:40

Alpha Nganga

21
3

score -1 · Answer 2 · answered Feb 19 '18 at 12:42

-1

Use context router in your components for changing routes.

constructor(props,context){
super(props,context)
}
this.context.router.history.push({pathname:sth/sth})

Dashboard.contextTypes = {
router: PropTypes.object.isRequired
}

answered Feb 19 '18 at 12:42

Amirhosein Shirani

99
10

Your answer does not help me because I do not know where this code goes. Please update your answer with more context and I can mark it correct if it works. Thank you :-) – Bryan Potts Feb 19 '18 at 12:50
1

You should not make any assumptions on the internals of a framework, e.g. how `react-router` passes information in the context or how it manipulates the history. Accessing the react context by yourself is generally discouraged unless you are writing a framework yourself. For this use case react-router provides a `` component that can simply be rendered with the path to redirect to. – trixn Feb 19 '18 at 13:52
The only problem ended up being I had more than one ``, a superfluous one around my ``s. Removed it and problem resolved. – Bryan Potts Feb 19 '18 at 16:10

React Router not re-rendering components on click, but works on refresh

2 Answers2