要添加到页面中的组件，而不是要重新呈现的页面

Question

我的question.js组件：

render() {
    return (
        this.state.questions.map((question) => {
            return (
                <section key={question.id} className='display-question'>
                    <div className='wrapper'>
                        <h3>Kategoria: {question.category}</h3>
                        <p>Poziom: {question.level}</p>
                        <p>Punkty: {question.pointAmount + question.pointBoost}</p>
                        <img alt='' style={{width: '80%'}} src={question.photoURL}/>
                    </div>
                </section>
            )
        })
    )
}

我的questions.js组件 - 这是一个列表，用户选择了他想要查看的更多问题。

render() {
    return (
        <section className='display-question'>
            <div className='wrapper'>
                <ul style={{listStyleType: 'none'}}>
                    {
                        this.state.questions.map((question) => {
                            return (
                                <li key={question.id}>
                                    <h3>Kategoria: {question.category}</h3>
                                    <p>Poziom: {question.level}</p>
                                    <p>Punkty: {question.pointAmount + question.pointBoost}</p>
                                    <img alt='' style={{width: '20%'}} src={question.photoURL}/>
                                    <Router>
                                        <React.Fragment>
                                            <Link to={`/question/${question.id}`}
                                                  style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie
                                            </Link>
                                            <Route exact path='/question/:id' component={Question}/>
                                        </React.Fragment>
                                    </Router>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </section>
    )
}

我想要的是：我希望将组件呈现为单独的页面。现在，组件被附加到链接的底部。像这样：

那么如何让Question组件在其上呈现呢？不是追加，而是成为唯一的组成部分。

我的导航栏导航按我想要的方式进行，但我看不出它与链接的做法有何不同：

render() {
    return (
        <React.Fragment>
            <Router>
                <React.Fragment>
                    <Bar>
                        <Bar.Header>
                            <Bar.Brand>
                                <Link id='home' to="/">UczIchApp</Link>
                            </Bar.Brand>
                        </Bar.Header>
                        <Nav>
                            <LinkContainer id='about' to='/about'>
                                <NavItem>O nas</NavItem>
                            </LinkContainer>
                            {
                                this.state.user ?
                                    <React.Fragment>
                                        <LinkContainer id="questions" to='/questions'>
                                            <NavItem>Zadania</NavItem>
                                        </LinkContainer>
                                        <NavItem onClick={this.logout}>Wyloguj się</NavItem>
                                    </React.Fragment>
                                    :
                                    <NavItem onClick={this.openLogin}>Zaloguj się</NavItem>
                            }
                        </Nav>
                    </Bar>
                    <Route exact path="/about" component={About}/>
                    <Route exact path="/questions" component={Questions}/>
                    <Route exact path="/" component={Home}/>
                </React.Fragment>
            </Router>
            <Modal
                show={this.state.show}
                onHide={this.handleClose}>
                <Modal.Header
                    closeButton>
                    <Modal.Title> Modal
                        heading </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <FormControl
                            id="email"
                            type="email"
                            label="Email address"
                            placeholder="Enter email"/>
                        <FormControl id="password" label="Password" type="password"/>
                        <Button onClick={this.login}>Zaloguj</Button>
                    </form>
                </Modal.Body>
                <Modal.Footer>
                    <Button id="close" onClick={this.handleClose}>Close</Button>
                </Modal.Footer>
            </Modal>
        </React.Fragment>
    )
}

Answer 1

原来我宣布了多个Routers。链接到解决它的帖子：React router renders component after a refresh