React routing failure

Question

I am pretty new to react, and I've encountered an error that I am not quite sure how to search for. The error I am facing is that if I don't place the paths I want in my index.tsx then it fails to render both my /create and /manage pages.

my Activities.tsx code in question is set as follows:

 <Fragment key={uuid()}>
            <Container>
                <Route exact path='/' component={HomePage}/>
                <Route exact path='/activities' component={ActivityDashboard}/>
                <Route path='/activities/:id' component={ActivityDetails}/>          
                {/* This bit of code seems to literally do nothing, odd as the one above is fully functional */}
                <Route path={['/createActivity', '/manage/:id']} component={ActivityForm}/>
            </Container>
            <NavBar />
        </Fragment>

The dashboard merely loads my list of activities and returns the following:

<Fragment>
            <Search 
                value={search}
                onSearchChange={handleSearch}
            />
            <Segment clearing>
                <Item.Group divided>
                    {myActivities.map(activity => (
                        <Item key={activity.id}>
                        <Item.Content>
                            <Item.Header as='a'>{activity.title}</Item.Header>
                            <Item.Meta>{new Date(activity.date).toLocaleString()}</Item.Meta>
                            <Item.Description>
                                <div>{activity.description}</div>
                                <div>{activity.city}, {activity.venue}</div>
                            </Item.Description>
                            <Item.Extra>
                                <Button as={Link} to={`/activities/${activity.id}`} floated="right" color="blue" content="View" />
                                <Button name={activity.id} onClick={(e) => deleteActivity(e, activity.id)} loading={target === activity.id && submitting} floated="right" negative content="Delete"/>
                                <Label basic content={activity.category}></Label>
                            </Item.Extra>
                        </Item.Content>
                    </Item>

                    ))}    
                </Item.Group>
            </Segment> 
        </Fragment>

The index.tsx is set as:

const routing = (
    <BrowserRouter>
        <Menu fixed='top' inverted>
            <Menu.Item header as={NavLink} exact to ="/">
                    <Image src="/assets/logo.png" alt="logo" size="mini">
                    </Image>  
            </Menu.Item>
            <Menu.Item name="Activities" as={NavLink} to="/activities">
                Activities
            </Menu.Item>
        </Menu>
        <Route exact path="/" component={HomePage}/>
        <Route path="/activities" component={Activities}/>
        <Route path={["/createActivity", "/manage/:id"]} component={ActivityForm}/>
  </BrowserRouter>
);


ReactDOM.render(routing, document.getElementById('root'));

If I remove the last route path in my index.tsx then it won't navigate to where it needs too. This is odd to me as I would suspect it to work the same way as my code for viewing the activity. Is there something basic that I am missing?

Do you mean if you remove the <Route path={["/createActivity", "/manage/:id"]} component={ActivityForm}/> you can no longer load either of those routes? confused about the question, also you dont want to set the key of a component (the fragment) to something that changes on render, which I presume uuid() does as it generates a new one when called? — Batzz
– Batzz, Commented Apr 7, 2020 at 22:42
Thank for the heads up about the fragment. So if I remove that line from index.tsx I cannot navigate to those pages when I click on the buttons that should take me there, even though those routes are defined in the Activities.tsx file. I just don't understand why those 2 routes fail to work, whilst /activities/:id works just fine — SomeStudent
– SomeStudent, Commented Apr 7, 2020 at 22:55
Interestingly, if I set the index.tsx to just have it return a BrowserRouter with its child being the component I want to load, instead of it also acting as a nav bar, it seems to work fine. Is it perhaps some sort of silent conflict between the components/paths? — SomeStudent
– SomeStudent, Commented Apr 7, 2020 at 23:11
I've written an answer because it's a bit long and its fancier formatting :) — Batzz
– Batzz, Commented Apr 8, 2020 at 0:07
Hope i understood the question right haha, if you're intent on fixing it the way you have it, the only way would be to prepend each of the routes in the array with /activities or keep them in the index.tsx file — Batzz
– Batzz, Commented Apr 8, 2020 at 0:12

Batzz · Accepted Answer · 2020-04-08 00:11:06Z

1

I think I get what you mean, the reason activities will always work with the extra routes you have in activities.tsx is because of the line <Route path="/activities" component={Activities}/> in index.tsx.

Since you haven't passed the exact prop it will render the <Activities> component whenever the url is /activities/xxxx. This means that the code in your Activities runs, and your routes in that file are then registered to the router (i.e activities/:id)

If you go to /createActivity, the <BrowserRouter> will never get to the point where the Activity component is rendered, so the new routes you've made in the <Container> are never registered, hence why the <Route path={['/createActivity', '/manage/:id']} component={ActivityForm}/> is actually never present. If you add it in the index.tsx file however, it will register that route and load the component on every route, and will therefore load the appropriate components.

answered Apr 8, 2020 at 0:11

Batzz

4324 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SomeStudent Over a year ago

I see that makes sense

Collectives™ on Stack Overflow

React routing failure

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related