Javascript 组件被添加到页面，而不是重新提交页面

我的

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

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

那么，如何使

问题

组件自己呈现呢？不是附加的，而是唯一的组件

我的导航栏按我想要的方式导航，但我看不出它与链接的工作方式有什么不同：

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

render（）{
返回(
乌奇查普
O nas
{
这个.state.user？
扎达尼亚
威洛古吉·西ę
:
扎洛古吉·西ę
}
情态动词
标题
扎洛古伊
接近
)
}

结果我声明了多个

路由器。链接到解决此问题的帖子：

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