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