How do I render a component, not a page in NextJS?

Viewed 430

I am trying to fix a button in a NextJS app that is inside of the authentication. The app does not use pages for authenticated routes, everything is /# and I am trying to figure out how to route the Settings component from a button. The original developer did not want to have any page paths in authentication.

Is there a process like in React, such that I can route to a component not page?

<Router>
  <Switch>
    <Route path='/settings'>
      <Settings />
    </Route>
  </Switch>
<Router>

I feel like withRouter might be the key, but I cannot find the path I need to the component.

1 Answers

I think that you approch Is not the best for a nextjs app. Anyway you can disable the nextjs file system routing in nextjs config and use a custom server

module.exports = {
  useFileSystemPublicRoutes: false,
}

Then you can use the react-router component. Take a look at this tutorial to see a more detailed example.

Related