React路由跳转后Question组件渲染异常，如何替换root节点内容？

你的问题核心在于Route组件的放置位置——路由匹配后渲染的组件，会精准出现在你写<Route>标签的那个位置，这就是两段代码表现不同的关键。

第一段代码的问题根源 #

你的第一段代码里，<Route path={'/question/:id'} component={Question}/>是和触发跳转的<Link>放在同一个<React.Fragment>里，而且这个Fragment应该是嵌套在某个<li>元素内部的对吧？这种情况下，点击Link跳转后，Question组件自然会渲染在这个Link的下方（也就是<li>的上下文范围内），而不是替换整个#root的内容。

第二段代码为什么能正常工作 #

反观导航栏的代码，所有<Route>标签都放在<Bar>（导航栏组件）的外面，和导航栏处于同级层级，属于页面的主内容区域。当你点击导航链接时，匹配的Route组件就会渲染在导航栏下方，自然就实现了替换#root里主内容的效果。

具体修改方案 #

你需要把<Route path={'/question/:id'} component={Question}/>移到和导航栏路由同级的位置——也就是放在全局的路由容器里，和<Route exact path="/about" ...>、<Route exact path="/questions" ...>这些页面级Route放在一起，而不是放在列表项的内部。

举个修改后的完整示例：

// 全局路由容器（比如你的App组件）
import { Router, Route, Switch } from 'react-router-dom';
// 导入你的Bar、About、Questions、Home、Question等组件

class App extends Component {
  // 你的state、logout、openLogin等逻辑

  render() {
    return (
      <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统一放在这里，用Switch确保每次只匹配一个路由 */}
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/questions" component={Questions}/>
            {/* 把Question的Route移到这个全局区域 */}
            <Route path='/question/:id' component={Question}/>
          </Switch>
        </React.Fragment>
      </Router>
    );
  }
}

然后你的列表项里只需要保留跳转用的Link即可：

// 列表项组件内的代码
<Link to={`/question/${question.id}`} style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie kurwo </Link>

这样修改后，点击Link跳转时，Question组件就会渲染在导航栏下方的主内容区域，完美替换#root里的对应部分，和其他页面路由的表现完全一致。

内容的提问来源于stack exchange，提问作者Alex Ironside