Question

我是个很新的反应者，我遇到了一个我不太确定如何搜索的错误。我面临的错误是，如果我没有在index.tsx中放置所需的路径，那么它将无法同时渲染/ create和/ manage页面。

有问题的我的Activities.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

我想我明白了您的意思，原因是活动始终与您在class KeyPair { var publicKey: SecKey var privateKey: SecKey init(publicKey: SecKey, privateKey: SecKey) { self.publicKey = publicKey self.privateKey = privateKey } } private func generateKeyPair() -> KeyPair? { let attributes: [String: Any] = [kSecAttrKeySizeInBits as String: 256, kSecAttrKeyType as String: kSecAttrKeyTypeECSECPrimeRandom, kSecPrivateKeyAttrs as String: [kSecAttrIsPermanent as String: false], kSecPublicKeyAttrs as String:[kSecAttrIsPermanent as String: false]] var error: Unmanaged<CFError>? if let privateKey = SecKeyCreateRandomKey(attributes as CFDictionary, &error), let publicKey = SecKeyCopyPublicKey(privateKey){ return KeyPair(publicKey: publicKey, privateKey: privateKey) } return nil }中拥有的多余路线一起工作是因为index.tsx中的行activities.tsx。

由于您尚未通过<Route path="/activities" component={Activities}/>道具，因此只要URL为exact，它将呈现<Activities>组件。这意味着您的/activities/xxxx中的代码会运行，然后您在该文件中的路由就会注册到路由器（即Activities）

如果您转到activities/:id，则/createActivity将永远不会到达渲染<BrowserRouter>组件的地步，因此您在{{1} }永远不会被注册，因此为什么Activity实际上从未出现。但是，如果将其添加到index.tsx文件中，它将注册该路由并在每个路由上加载组件，因此将加载适当的组件。

反应路由失败

1 个答案: