如何显示两个反应组件

Question

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

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

Answer 1

试试这个代码，这会在你的每个页面上添加 header 将组件 Navbar 放在 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 添加 header

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

如何显示两个反应组件

How to display two react components

javascript

components

reactjs