Want to build Header component from Bootstrap template to React but my browser throwing below errors - javascript

Want to build Header component from Bootstrap template but my browser is throwing the following error:
Uncaught Error: Invariant failed: You should not use <NavLink> outside a <Router>
The above error occurred in the <Router.Consumer> component
I imported:
import React from 'react';
import { NavLink } from 'react-router-dom';
in my Header.js
and converted my all <a> in <NavLink to='/Shop' >Shop</NavLink>
and my App.js is like this:
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './container/Home';
import Shop from './container/Shop';
import {Switch} from 'react-router-dom';
import {Route} from 'react-router-dom';
function App() {
return (
<>
<Header />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/shop' exact component={Shop} />
</Switch>
<Footer />
</>
);
}
export default App;


In your App.js,
Add Router component
Like this
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './container/Home';
import Shop from './container/Shop';
import {Switch} from 'react-router-dom';
import {Route} from 'react-router-dom';
import {BrowserRouter as Router} from 'react-router-dom';
function App() {
return (
<>
<Router>
<Header />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/shop' exact component={Shop} />
</Switch>
<Footer />
</Router>
</>
);
}
export default App;

Related

React Router V6 doesn't show up the page?

I am trying to use react router v6. However when try those routes below, it just shows an empty page. What could be the problem ?
App.js
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/home';
function App() {
return <BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/hi' element={<div>hi</div>} />
<Route path='/bye' element={<div>bye</div>} />
</Routes>
</BrowserRouter>
}
export default App;
Home.jsx
import React from "react";
export default function Home(){
return <h1>Home</h1>
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App />, document.getElementById('root'))

It works. Check your libraries or Re-Install the Package(npm install).
After deleting package.lock file and node_modules
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import Home from "./home";
function Home() {
return <h1>Home</h1>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/hi" element={<div>hi</div>} />
<Route path="/bye" element={<div>bye</div>} />
</Routes>
</BrowserRouter>
);
}
export default App;

How do i go about this error in react.js : (Module not found: Error: Can't resolve './src/pages/home') .. i have pasted the code below

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Route } from 'react-router-dom';
import home from './src/pages/home';
<Route exact path='/' component={home} />
function App() {
return (
<div className="wrapper">
<Router>
<Route path='/welcome' element={<home/>} />
</Router>
</div>
);
}
export default App;
//this code returns a module not found error from the app.js file when I try to run it using react

How do I fix the issue of having two copies of react. I have detected that I have two copies of react but can't fix the issue. Below is my code

App.js
import Navbar from './pages/Navbar';
import Body from './pages/Body';
import logo from './logo.svg';
import About from './pages/About';
import FAQ from './pages/FAQ'
import { BrowserRouter as Router, Route, Routes, } from 'react-router-dom'
import Footer from './pages/Footer';
import News from './pages/News'
import Solutions from './pages/Solutions';
function App() {
return (
<>
<Router>
<Navbar/>
<Routes>
<Route exact path='/'> <Body/> </Route>
<Route exact path='/about' component={About}>
{/* <About/> */}
</Route>
<Route path='/solution' component={Solutions}>
{/* <Solution/> */}
</Route>
<Route path='faq' component={FAQ}>
<FAQ/>
</Route>
<Route path='news' component={News}>
{/* <News/> */}
</Route>
</Routes>
</Router>
<Footer/>
</>
)
}
export default App;
Navbar.js
import * as React from 'react'
import { Link, useHref } from 'react-router-dom'
import logo from '../assets/images/GLOBAMED LOGO INLINE 1-1.png'
import Services from './Services'
import About from './About'
export default function Navbar() {
return (
<>
<Link to={'/about'}>About</Link>
<Link to={'/'}>Home</Link>
</>
)
}
body.js
import React from 'react'
import image1 from '../assets/images/image 1.png'
import image2 from '../assets/images/image 2.png'
import Footer from './Footer'
export default function Body() {
return (<>
<div className='main--body'>
<div className='body--text'>
We make <span className='body-text-span'> your wellbeing our priority</span>,
anyday, anywhere, anytime.
<p className='small-text'>
You are important to us and so is your health!
</p>
</div>
<img src={image1} className='image1' alt='female doctor'></img>
<img src={image2} className='image2' alt='male doctor'></img>
</div>
<Footer/>
</> )
}
solutions.js
import React from 'react'
export default function Solutions() {
return (
<div>Solutions</div>
)
}
News.js, FAQ.js, About.js, Footer.js are all like the solutions.js for now

While using Route the site is not loading , when i am wrapping inside BroswerRoute only its working

this my App.js Code , not able to find any solution .All item are imported and its working fine if its not wrapped in Route
import React from 'react';
import './App.css';
import { BrowserRouter, Route } from "react-router-dom"
import Home from './Pages/Home';
import SignUpPage from './Pages/SignUpPage';
function App() {
return (
<div className="App">
<BrowserRouter>
<Route >
<Home />`enter code here`
</Route>
<Route path='/signup'>
<SignUpPage />
</Route>
</BrowserRouter>
</div >
);
}
export default App;

You're not wrapping your routes correctly, this is how it should be with react-router-dom v6:
import React from "react";
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import SignUpPage from "./Pages/SignUpPage";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
You wrap your routes in a routes component, imported from react-router-dom. You can Then declare your route on one line <Route path="/insertPathHere" element={<YourComponent/>} />

Only my navbar is being displayed in my react project

Only my navbar is displaying and im not recieving any error. the homepage has just the navbar and a blank space
'''
import React from 'react';
import Navbar from './components/Navbar';
import './App.css';
import Home from './components/pages/Home';
import { BrowserRouter as Router, Routes as Switch, Route } from 'react-router-dom';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/services' component={Services} />
<Route path='/products' component={Products} />
<Route path='/sign-up' component={SignUp} />
</Switch>
</Router>
</>
);
}
export default App;
'''

For you see your navbar in other pages you can test going to localhost:3000/services and see if your navbar is there.

Categories

Resources