You cannot render a inside another . You should never have more than one in your app.
Why am I having this issue? I have checked my code and I dont have a Router inside another Router. In fact, i only have one router on my app.
This is the component:
import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Portfolio from '../pages/Portfolio';
function Menu()
{
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Portfolio />} />
</Routes>
</BrowserRouter>
);
};
export default Menu;
And I call it from this component:
import React from 'react';
import AboutMe from '../components/AboutMe';
import Header from '../components/Header';
import Menu from '../components/Menu';
import Particle from '../components/Particle';
import Services from '../components/Services';
import Skills from '../components/Skills';
function Portfolio()
{
return (
<React.StrictMode>
<Particle />
<Menu />
<Header />
<div className='d-flex flex-column mt-5' id='about-me-services'>
<div><AboutMe /> </div>
<div><Services /> </div>
</div>
<Skills />
</React.StrictMode>
);
}
export default Portfolio;
Thanks for your help :)
Finally, Menu contains a Portfolio, which contains a Menu, which contains a Portfolio, which contains... etc. as super said. Thanks for your help
Related
I'm having a problem with react-route. The NoteList component is not rendering.
app.js
import { BrowserRouter as Router, Routes } from 'react-router-dom';
import logoNotes from './img/logoNotes.png';
import NoteList from './components/NoteList/NoteList';
import './App.css';
function App() {
return (
<Router>
<div className='aplication-notes'>
<div className='notes-logo-container'>
<img src={logoNotes} className='notes-logo' alt='logo' />
</div>
<div className='note-list'>
<h1> my notes</h1>
<br></br>
<Routes
path='/src/components/NoteList/NoteList'
element={<NoteList />}
/>
</div>
</div>
</Router>
);
}
export default App;
I can see the div and h1 that is in the app.js file but not the Notelist component.
How can I solve this problem?
The Routes component is only responsible for wrapping Route components and handles the path matching duties. It doesn't take path or element props. These belong to the Route component.
Import the Route component and render the NoteList component by the Route and wrap the Route with Routes.
Example:
import {
BrowserRouter as Router,
Routes
Route // <-- import
} from 'react-router-dom';
import logoNotes from './img/logoNotes.png';
import NoteList from './components/NoteList/NoteList';
import './App.css';
function App() {
return (
<Router>
<div className='aplication-notes'>
<div className='notes-logo-container'>
<img src={logoNotes} className='notes-logo' alt='logo' />
</div>
<div className='note-list'>
<h1> my notes</h1>
<br />
<Routes> // <-- wrap Route components
<Route // <-- Route renders content
path="/src/components/NoteList/NoteList"
element={<NoteList />}
/>
</Routes>
</div>
</div>
</Router>
);
}
export default App;
Now when you navigate to "/src/components/NoteList/NoteList" in the browser you should see the UI rendered as well as the NoteList component.
I'm working on one of my friend's half-built React Project. I'm trying to route my react-app with react-router-dom. The components inside the <switch> are not working. Here's my
App.js
import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';
// Import react-router-dom
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Main} />
<Route path="/process" component={ProcessInput} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Main.js
import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';
class Main extends React.Component {
render() {
return (
<div>
<main>
<Slider />
<Card1 />
<Card2 />
<Prompt />
</main>
</div>
)
}
}
export default Main;
The <Header /> and <Footer /> which are outside the <Switch> are showing anyways as intended. But, I want the Main component to be loaded as a root component (Launcher).
There are no errors on the console.
Please help me get to know what am I doing wrong. Thanks in advance :)
<Route path="/" exact>
<Main/>
</Route>
<Route path="/process"><ProcessInput/>
</Route>
This is the old way to do it. You can try this
Hi im new to react and the routers. The problem is when I click on a link the URL at the top changes so I can tell that something is happening. But the page does not refresh automatically and so the new components arent rendered hen I click on it. If I manually refresh the page in chrome it will then render the correct components for the link. Not sure why this is happening.
Also I'm not sure if this has any affect on it but I do have a back end node js server and MongoDB data base this isn't just a front end react page. Im not sure if that has any affect? the functions of the nodejs server and Mongodb work it just doesn't refresh. Im not sure if that is relevant.
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault , setDefault] = useState(String);
return (
<div className="App">
<h1>react app</h1>
<Navbar/>
<BrowserRouter>
<div className="App">
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
/*
<div className='row'>
<div className='col-md-6'>
<Register/>
</div>
<div className='col-md-6'>
<Login/>
</div>
</div>
<div className ='row justify-content-center' >
<div className='col-md-8 '>
<Notes/>
</div>
</div>
*/
export default App;
import React, {useState} from 'react';
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
function Navbar() {
return (<div>
<p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
<div className ='navbarOptions' style={{backgroundColor:'black'}}>
<BrowserRouter>
<ul>
<Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>
<li >
Register
</li>
</Link>
<Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>
<li>
Login
</li>
</Link>
<Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>
<li >
Notes
</li>
</Link>
</ul>
</BrowserRouter>
</div>
</div>
);
}
export default Navbar ;
Here it shows login in the URL but is still rendering notes when I refresh the page it will show notes
You don't need to use browserrouter in the navlink, only use in router and also put the BrowserRouter before the switch
Like this:-
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault, setDefault] = useState('');
return (
<div className="App">
<h1>react app</h1>
<Navbar/>
<div className="App">
<BrowserRouter>
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</BrowserRouter>
</div>
</div>
);
}
export default App;
Remove BrowserRouter in your navbar component. I think that should work, normally we have to use BrowserRouter once.
BrowserRouter should wrap all route things, that means that you should put the links within the Browser Router
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault, setDefault] = useState('');
return (
<div className="App">
<h1>react app</h1>
<BrowserRouter>
<Navbar/>
<div className="App">
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
export default App;
import React, {useState} from 'react';
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
function Navbar() {
return (
<div>
<p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
<div className ='navbarOptions' style={{backgroundColor:'black'}}>
<ul>
<Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>Register</Link>
<Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>Login</Link>
<Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>Notes</Link>
</ul>
</div>
</div>
);
}
export default Navbar ;
I'm learning React router, tried to build a pretty basic application like this Home.js:
import React from 'react';
import About from '../pages/About';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">HOME</Link>
</li>
<li>
<Link to="/about-us">ABOUT US</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about-us">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
)
}
const Home = () => {
return (
<>
<Navbar />
</>
)
}
export default Home;
Then in index.js render Home page:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './pages/Home';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Home />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Problem is, Home wouldn't render in localhost:3000, terminal showed Compiled successfully! but when loading localhost:3000, it just spins forever with nothing rendered. However, if I remove the element it rendered. Folder structure set like this:
src
--pages
----About.js
----Home.js
index.js
Can anyone help?
You've created yourself an infinite loop from what it looks like. Your index.js returns your Home component, which then returns the Navbar, which has a router, which then returns the Home component, which then repeats that cycle over and over again.
This is the approach I would take, which will show the Navbar on both the about and home page, and will only show one of the pages at a time based on the current route.
// Navbar.js
const Navbar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">HOME</Link>
</li>
<li>
<Link to="/about-us">ABOUT US</Link>
</li>
</ul>
</nav>
)
}
export default Navbar;
// Layout.js
import React from 'react';
import Navbar from './Navbar';
import About from '../pages/About';
import Home from '../pages/Home';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
const Layout = () => {
return (
<Router>
<Navbar />
<Switch>
<Route path="/about-us">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
)
}
export default Layout;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Layout from './components/Layout';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Layout />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
src
--components
----Navbar.js
----Layout.js
--pages
----About.js
----Home.js
index.js
I'm working on a React web application using React router.
In my App.js file i have imported header and home component.
In home component i have 2 components called Onlinebanks and Creditcard that i imported from online-banks.js and creditcard.js files.
When the user clicks link buttons in home.js component, the Onlinebanks and Creditcard components should render.
Instead i am getting an error called Error: Invariant failed: You should not use < Link> outside a < Router>.
Why it's not working?
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
APP.JS
import React, { Component } from 'react';
import './App.css';
import Header from './components/header';
import Home from './components/home';
class Routes extends Component {
constructor(props){
super(props);
this.state = {
};
}
render(){
return (
<div className="wrapper">
<Header/>
<Home/>
</div>
);
}
}
export default Routes;
HOME.JS
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Onlinebanks from './online-banks';
import Creditcard from './creditcard';
const Home = (props) => {
return (
<div className="section">
<div className="main-page">
<div className="tab-container">
<div className="tab-btns">
<Link to="/">
<div className="online-bank-btn">
Online pangad
</div>
</Link>
<Link to="/creditcard">
<div className="creditcard-btn">
Krediitkaart
</div>
</Link>
</div>
<Switch>
<Route path="/" exact component={Onlinebanks}/>
<Route path="/creditcard" exact component={Creditcard}/>
</Switch>
</div>
</div>
</div>
)
}
export default Home;
ONLINE-BANKS.JS
import React from 'react';
const Onlinebanks = (props) => {
return (
<div className="banks-container">
<input type="button" value="Pay" className="pay-btn" id="online-banks-pay"></input>
</div>
)
}
export default Onlinebanks;
CREDITCARD.JS
import React from 'react';
const Creditcard = (props) => {
return (
<div className="Creditcard-container">
<input type="button" value="Pay" className="pay-btn" id="creditcard-pay"></input>
</div>
)
}
export default Creditcard;
I don't see anywhere in your code where you imported BrowserRouter from react-router-dom which should wrap all the other components rendered by your top level componet (app.js) or entirely wrap the app component. so, first import { BrowserRouter as Router } from "react-router-dom" in index.js, then wrap App component with Router as follows
ReactDOM.render(<Router> <App /> </Router>, document.getElementById("root"));
alternatively you can wrap the retun statment in app.js with Router as follows after importing BrowserRouter as Router
return (
<Router>
<div className="wrapper">
<Header/>
<Home/>
</div>
</Router>
);
<Router> is an HOC component, so you need to use it at the top most level possible. Suggestion would be to create a separate Router component and use it within App.js file above div tag
<CustomRouter>
<div className="wrapper">
<Header/>
<Home/>
</div>
</CustomRouter>
you need to better understand how react-router-dom works.
visit here for complete routing guide react-router-dom
i found some major missings in your app.js file.
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
i don't see this method in your app.js .