Реагировать на ошибку маршрутизации

Question

Я новичок, чтобы реагировать, и я столкнулся с ошибкой, которую я не совсем уверен, как искать. Ошибка, с которой я сталкиваюсь, заключается в том, что если я не помещаю нужные мне пути в мои index.tsx, то он не может отобразить мои страницы / create и / management.

мой рассматриваемый код Деятельности.tsx устанавливается следующим образом:

 <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>

Панель инструментов просто загружает мой список действий и возвращает следующее:

<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>

index.tsx имеет значение:

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'));

Если я удаляю последний путь маршрута в моем index.tsx, он также не будет перемещаться туда, где ему нужно. Это странно для меня, так как я подозреваю, что он работает так же, как и мой код для просмотра действия. Есть что-то, что мне не хватает?

Answer 1

Мне кажется, я понимаю, что вы имеете в виду, потому что действия всегда будут работать с дополнительными маршрутами, которые у вас есть в activities.tsx, из-за строки <Route path="/activities" component={Activities}/> в index.tsx.

Поскольку у вас нет Если значение пропущено exact, он будет отображать компонент <Activities> всякий раз, когда URL равен /activities/xxxx. Это означает, что код в вашем Activities выполняется, и ваши маршруты в этом файле затем регистрируются на маршрутизаторе (т. Е. activities/:id)

Если вы go - /createActivity, <BrowserRouter> никогда не доберется до точки, где отображается компонент Activity, поэтому новые маршруты, которые вы сделали в <Container>, никогда не регистрируются, следовательно, почему <Route path={['/createActivity', '/manage/:id']} component={ActivityForm}/> фактически никогда не присутствует. Однако, если вы добавите его в файл index.tsx, он зарегистрирует этот маршрут и загрузит компонент на каждом маршруте и, следовательно, загрузит соответствующие компоненты.