0

I am trying to setup some nesting routing in my app and for some reason I can't get it to open my nested pages.

In index.js

<Router>
  <Switch>
    <Route exact path="/" component={App}/>
    <Route path="/admin" component={AdminApp}/>
    <Route component={() => { return <div>Page not found</div>}}/>
  </Switch>
</Router>

In AdminApp.jsx:

import ViewUser from "./ViewUser";

export default function AdminApp({ match }) {
    const [users, setUsers] = useState([]);

    useEffect(() => {...axios to get users from db and setUsers()...}, [])

    return (
    <>
      <div>User</div>
      <Link to={`${match.url}/users/view/${user.Name}`>View</Link>
      <Switch>
        <Route path={`${match.path}/users/view/:username`} component={ViewUser}/>
      </Switch>
    </>) 
}

ViewUser component is a child of the AdminApp component.

And whenever I click on the View link, it changes my url to http://localhost:3001/admin/users/view/theusernameoftheselecteduser , so the url itself (at least in the browser bar) is correct, but it renders the Page not found route and it never renders the ViewUser component. I have a console.log inside it, it does not get triggered at all.

Edit: The accepted answer on this question is what I am trying to do Nested routes with react router v4 / v5 but for some reason I can't get it to work.

https://reactrouter.com/web/example/nesting same example by react-router and I cant get it to work

Darkbound
  • 3,026
  • 7
  • 34
  • 72

2 Answers2

1

Your application will always render one Route of Switch. When don't match anything, it will render the not found page.

Add the route as a child of Switch, then when the path match it will render the component instead of 'Not found'

<Router>
  <Switch>
    <Route exact path="/" component={App}/>
    <Route exact path="/admin" component={AdminApp}/>
    <Route path={`/admin/users/view/:username`} component={ViewUser}/>
    <Route component={() => { return <div>Page not found</div>}}/>
  </Switch>
</Router>
Daniel Pantalena
  • 409
  • 2
  • 9
  • ViewUser is a component that is a child of the AdminApp component, that is why I am trying to Nest the routes. What if I have 1000 different routes, do I add them all in the main router in index.js? Doesnt seem right. – Darkbound Aug 31 '20 at 19:12
  • So, on the path `/admin/users/view/:username` you just want to render the viewUser and do not render AdminApp?? – Daniel Pantalena Aug 31 '20 at 19:20
  • Yes, exactly, the View link is inside AdminApp and from there I should render the ViewUser component – Darkbound Aug 31 '20 at 19:22
  • One problem is that you have a "default" statement in you Switch. So, if nothing match it will render the not found. – Daniel Pantalena Aug 31 '20 at 19:23
  • I can not imagine any other way than to add the route inside switch – Daniel Pantalena Aug 31 '20 at 19:25
  • You can make a parent component "routes" that returns some routes for you instead put all routes together – Daniel Pantalena Aug 31 '20 at 19:28
  • https://reactrouter.com/web/example/nesting here is the same eaxmple by react-router themselves, and at least I believe that I have replicated it and I cant get it to work – Darkbound Aug 31 '20 at 19:29
  • First I think you will need to remove the 'exact' of the route with path '/admin', so it will render AdminApp and ViewUser with the path '/admin/users/view/:username' – Daniel Pantalena Aug 31 '20 at 19:44
  • Your state call 'users' (with s) and you are using 'user.name' (without s) to Link path – Daniel Pantalena Aug 31 '20 at 19:50
  • Its user because I am using .map on users to make links for all users – Darkbound Aug 31 '20 at 19:54
0

Remove the exact prop from your admin route. With the exact prop set, fails to match with anything after /admin.

technicallynick
  • 1,562
  • 8
  • 15
  • Ok, I did that, but now, when I click on the View link, it changes my URL on the browser, but just renders the /admin component – Darkbound Aug 31 '20 at 19:05