Unable to see the text returned from home and tutorials page in react-hooks site

Question

Unable to see the header text returned in my Home and Tutorials page in my react hooks site. Below is my App.js, Navigation.js and Home.js. Could someone please advise about the problem here.

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Tutorials from "./components/Tutorials";
import Navigation from './components/Navigation';

function App() {
  return (
    <BrowserRouter>
        <Navigation>
          <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/tutorials" component={Tutorials} />
          </Switch>
        </Navigation>
    </BrowserRouter>
  );
};

export default App;

Navigation.js

import React from 'react';
import { NavLink} from 'react-router-dom';

const Navigation = () => {

    return (
        <div className="App">
            <div className="wrapper">
                <div id="wrap">
                    <nav className="siteNavigation_nav_links">
                        <div className="row" ></div>
                        <div className="main_links_nav">
                            <NavLink className="mob_link" to="/">Home</NavLink>
                            <NavLink className="mob_link" to="/tutorials">Tutorials</NavLink>
                        </div>
                    </nav>
                </div>
            </div>
        </div>

    )

}

export default Navigation;

Home.js

import React from 'react';

const Home = () =>{

    return (
        <div className="App">
            <h1>This is Home Page !</h1>
        </div>
    )
}
export default Home;

Tutorials.js

import React from 'react';

const Tutorials = () =>{

    return (
        <div><h1>This is Tutorials Page !</h1></div>
    )
};
export default Tutorials;

If we add Navigation component separately won''t that be easy when have more links/ nested links ? — soccerway, Sep 16 '20 at 08:54

Prateek Thapa · Accepted Answer · 2020-09-16T09:00:43.653

1

Navigation is a Navbar component. And you want it everywhere on the site.

So, you can easily do it by using it outside the scope of the Switch component. In doing so, it will render all over your screens.

  <BrowserRouter>
        <Navigation />
          <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/tutorials" component={Tutorials} />
          </Switch>
    </BrowserRouter>

edited Sep 16 '20 at 09:00

answered Sep 16 '20 at 08:46

Prateek Thapa

4,829
1
9
23

So if we add the `` inside the navigation tags it wont that way ? – soccerway Sep 16 '20 at 08:52
Why should you add Switch inside the navigation tags? – Prateek Thapa Sep 16 '20 at 08:55
Later I am planning to implement protected route and nested routes so think switch might be helpful – soccerway Sep 16 '20 at 08:59
I don't think you need to use Switch inside your navigations tags. – Prateek Thapa Sep 16 '20 at 09:01
Much appreciate your help, I will further investigate on that. Upvoted and accepted your ans already ! – soccerway Sep 16 '20 at 10:23
Could you please help me with this problem here: https://stackoverflow.com/questions/63985577/on-click-on-link-should-create-open-an-html-page-in-react-hooks-site-with-conten – soccerway Sep 22 '20 at 03:12

Unable to see the text returned from home and tutorials page in react-hooks site

1 Answers1