如何显示两个反应组件

Question

This is my first time using React and need some help. I have a TextEditor component and a Navbar component in my App.js class. I am trying to get both to display on my page, but only see the TextEditor component. When this component is removed i can then see the Navbar component. How can i see both components on my page?

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

try this code, this add header on every your page with put component Navbar outside 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>
    )
  }
}

or add header just with component TextEditor instead

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

Answer 2

You Need to use a fragment to wrap everything in the return statement in. It is basically just an empty html tag as seen below.

https://reactjs.org/docs/fragments.html

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