如何显示两个反应组件答案

【问题标题】：How to display two react components如何显示两个反应组件
【发布时间】：2021-12-17 10:37:32
【问题描述】：

这是我第一次使用 React，需要一些帮助。我的 App.js 类中有一个 TextEditor 组件和一个 Navbar 组件。我试图让两者都显示在我的页面上，但只看到 TextEditor 组件。删除此组件后，我可以看到导航栏组件。如何在我的页面上看到这两个组件？

class App extends Component {
  render() {
  return (
    <Router>
    <div className="App">
      <Switch>
        {/* Navbar */}
        <Route exact path="/" component={Navbar} />
        <Navbar bg="light" expand="sm"/>
        {/* Home page */}
        <Route path="/" exact> 
          <Redirect to={`/documents/${uuidV4()}`} />
        </Route>
        {/* TextEditor */}
        <Route path="/documents/:id" component={TextEditor}> 
          <TextEditor />
        </Route>
      </Switch>
      </div>
    </Router>
  )
  }
}

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

试试这段代码，在你的每个页面上添加标题，并将组件导航栏放在 Switch 之外

class App extends Component {
  render() {
    return (
        <Router>
            <div className="App">
                {/* Navbar */}
                <Navbar bg="light" expand="sm"/>
                <Switch>
                    {/* Home page */}
                    <Route exact path="/"> 
                        <Redirect to={`/documents/${uuidV4()}`} />
                    </Route>
                    {/* TextEditor */}
                    <Route path="/documents/:id" component={TextEditor}> 
                        <TextEditor />
                    </Route>
                </Switch>
            </div>
        </Router>
    )
  }
}

或仅使用组件 TextEditor 添加标题

class App extends Component {
  render() {
    return (
        <Router>
            <Switch>
            {/* Home page */}
            <Route exact path="/"> 
                <Redirect to={`/documents/${uuidV4()}`} />
            </Route>
            {/* TextEditor */}
            <Route path="/documents/:id" component={TextEditor}> 
                {/* Navbar */}
                <Navbar bg="light" expand="sm"/>
                <TextEditor />
            </Route>
            </Switch>
        </Router>
    )
  }
}

【讨论】：