Designing a proper Navigation Bar in React?

0
votes

I am trying to create a following app with NavBar in React. However I cannot render the element on the screen after clicking the hyper-link. Everything displays correctly in my browser however I cannot open render new element under the nav-bar after clicking the NavLink.

enter image description here

App.ts My main component

import React from "react";
import ReactDOM from "react-dom"
import Navbar from "./Navbar"
import Form from "./Form"
import Messages from "./Messages"

import { BrowserRouter } from "react-router-dom"


// STYLE

class App extends React.Component {
  render() {

    return (
      <BrowserRouter>

        <div className="App">
          <Navbar />
          <Form />
        </div>
      </BrowserRouter>

    );

  }
}



ReactDOM.render(<App />, document.getElementById('root'));

Navbar.tsx Navigation bar containing only messages tab at this moment

import React from "react";
import { Route, Link } from "react-router-dom";
import Messages from "./Messages"


const topBarS = {
  background: 'cyan',
  height: '50px',
  width: '100%%',
};



 class Navbar extends React.Component {
  render()
  {
  return(
  <div style={topBarS}>
                <nav>
<Link to="/Messages">Messages</Link>
                </nav>
                <Route
                    path="/Messages"
                    component={Messages}

                />
            </div>
  );

  }

}
export default Navbar;

Messages.tsx New tab that should display right after clicking Messages NavLink

import React from "react";
import ReactDOM from "react-dom"


class Messages extends React.Component {
    render() {
        return (<h4>You have no messages</h4>)

    }
};
export default Messages;

Form.tsx Form

import React from "react";
import ReactDOM from "react-dom"

const Form = () => (
  <form method="POST">
    <label htmlFor="name">Name</label>
    <div />
    <input type="text" name="name" />
    <div />

    <label htmlFor="title">Title</label>
    <div />
    <input type="title" name="title" />
    <div />


    <label htmlFor="message">Message</label>
    <div />
    <textarea name="message" ></textarea>
    <div />
    <input type="submit" />
    <div>
    </div>
  </form>
)

export default Form;
2
reactjstypescript

2 Answers

0
votes

You can use Route inside the BrowserRouter like this : 

<BrowserRouter>
        <div className="App">
          <Navbar />
          <Route exact path='/' component={Home} />
        </div>
 </BrowserRouter>
0
votes

What you need here is an AppRouter that has all the routes in your page wrapped in a <Switch> component like so:

 <BrowserRouter>
    <div className="App">
      <Navbar />
        <Switch>
           <Route
                path="/Messages"
                component={Messages}
            />
           <Route
                path="/"
                component={Home}
            />
       </Switch>   
    </div>
  </BrowserRouter>

And inside the Navbar just leave the Links and drop the Route components.

Good Luck