代码之家 › 专栏 › 技术社区 › SomeStudent

反应路由失败

react-router reactjs

SomeStudent · 技术社区 · 5 年前

我是个新手,我遇到了一个错误,我不太确定如何搜索。我面临的错误是,如果我不把我想要的路径放在我的 index.tsx 然后,它无法呈现“我的/创建”和“管理”页面。

我的活动。有问题的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>

索引。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'));

如果删除索引中的最后一条路由路径。tsx则无法导航到需要的位置。这对我来说很奇怪,因为我怀疑它与查看活动的代码的工作方式相同。我有没有遗漏一些基本的东西?

0 回复 | 直到 5 年前

Batzz 5 年前

我想我明白你的意思了,因为活动总是与你的额外路线一起工作 activities.tsx 是因为排队 <Route path="/activities" component={Activities}/> 索引输入。tsx。

因为你还没有通过考试 exact 它将使 <Activities> 只要url是 /activities/xxxx .这意味着 Activities 运行,然后将该文件中的路由注册到路由器(即 activities/:id )

如果你去 /createActivity 这个 <BrowserRouter> 永远不会达到 Activity 组件被渲染,因此在 <Container> 从未注册,因此 <Route path={['/createActivity', '/manage/:id']} component={ActivityForm}/> 事实上,它从未出现过。如果你把它添加到索引中。然而,tsx文件将注册该路由并在每个路由上加载组件,因此将加载适当的组件。