单击时呈现包含单个组件的页面

Question

我有这段代码：

<Router>
    <React.Fragment>
        <Link to={`/question/${question.id}`}
              style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie kurwo
        </Link>
        <Route path={'/question/:id'} component={Question}/>
    </React.Fragment>
</Router>

现在，当我渲染Question组件时，它会在li元素下呈现。像这样：

我希望它基本上重写网站的<div id="root"></div>部分。我怎样才能做到这一点？这很奇怪，但它是用导航栏做的。代码在这里：

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

那么我错过了什么？

Answer 1

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