I'm new to learning React so I'm wondering if anyone can help me. I'm currently building a portfolio through React and I'm working on the Nav for this. I'm not getting any errors in the Console and when I click on each Link, it displays the Link I've clicked on in the URL but it won't show me any of my Content from each Link. Can anyone please help explain where I am going wrong?
App Code
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Projects from './Projects.js';
import Contact from './Contact.js';
import About from './About.js';
import Skills from './Skills.js';
import Home from './App.js';
import './App.css';
function App() {
return (
<BrowserRouter>
<div className="App">
<Route path="/" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/contact" element={<Contact />}></Route>
<Route path="/projects" element={<Projects />}></Route>
<Route path="/skills" element={<Skills />}></Route>
<div className="navigation">
<div className="navigation-sub">
<Link to="/" className="item">Home</Link>
<Link to="/about" className="item">About</Link>
<Link to="/contact" className="item">Contact</Link>
<Link to="/projects" className="item">Projects</Link>
<Link to="/skills" className="item">Skills</Link>
</div>
</div>
</div>
</BrowserRouter>
);
}
export default App;
index Code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
About Code
import React from "react";
function About(props) {
return (
<div>
<h1>About Me</h1>
</div>
)
}
export default About;
Thanks :)
You are already rendering a BrowserRouter around App, so remove the extraneous BrowserRouter from App. The Route components are also missing being wrapped in a Routes component that handles path matching. It's a required component. You should have some console errors warning of invariant violations for the rendering of a router within another router and the routes not being wrapped directly by a Routes component.
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/projects" element={<Projects />} />
<Route path="/skills" element={<Skills />} />
</Routes>
<div className="navigation">
<div className="navigation-sub">
<Link to="/" className="item">Home</Link>
<Link to="/about" className="item">About</Link>
<Link to="/contact" className="item">Contact</Link>
<Link to="/projects" className="item">Projects</Link>
<Link to="/skills" className="item">Skills</Link>
</div>
</div>
</div>
);
}
Related
I am trying to use the router in react but I get nothing when changing the path, you can check the code here Link ..............................
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
</Layout>
);
}
export default App;
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
<div>{children}</div>
</div>
);
}
export default Layout;
Place the <div>{children}</div> inside <Router>, then in app.js remove Router. Because that has already been declared in <Layout>
Layout.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<div>{children}</div>
</Router>
</div>
);
}
export default Layout;
App.js
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Layout>
);
}
export default App;
Your current code will output the following:
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
{/* Children (App.js) */}
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
{/* Children (App.js) */}
</div>
You don't need two instances of <Router>.
This how it should be:
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
{/* Children (App.js) */}
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
{/* Children (App.js) */}
</Router>
you need to remove Router from your route wrap
import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Routes, Route } from "react-router-dom";
function App() { return (
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
); }
export default App;
The Problem is, that you have two different Routers in your Application.
You need to move the Layout Component inside your Routercomponent in App.js
And then delete the second router inside of Layout.
More info here:
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
I have a problem with react Router.
So i am building the nav of an website and when i'm doing the routes, nothing appears.
Would you help me please to see what i'm doing wrong?
The page stays white. Nothing appears, even the root doesnt see the homepage.
........................................................................................
Homepage:
import React from 'react';
import Navbar from '../allpages/navbar/Navbar';
import {
BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import Contact from "../contact/Contact";
import About from "../about/About";
const Home = () => {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path="/about" element={About} />
<Route path="/contact" element={Contact} />
<Route exact path="/" element={Home} />
</Routes>
</Router>
<h3>Home</h3>
</>
)
}
export default Home
Navbar:
import React from 'react';
import {
BrowserRouter as Link
} from "react-router-dom";
const Navbar = () => {
return (
<div>
<nav>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Navbar
main app:
import './App.css';
import Home from './components/home/Home'
function App() {
return (
<>
<Home />
</>
);
}
export default App;
contact:
import React from 'react';
const Contact = () => {
return (
<div>
<h3>Contact</h3>
</div>
)
}
export default Contact
About:
import React from 'react';
const About = () => {
return (
<div>
<h1>About</h1>
</div>
)
}
export default About
So besides this typo:
{ BrowserRouter as Link } // use just Link
which is inside Navbar.js
I would also use recommended approach by React-Router team. Which uses <Switch> component to wrap pages. You are using Routes instead, idk if this is even valid.
You can check this example: https://v5.reactrouter.com/web/example/basic
which is really similar to your code.
What versión is you using? You might be out of dated
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/*" element={<Outlet />}>
<Route path="informacion-financiera" element={<Financiera />} />
<Route path="derechos-de-autor" element={<Author />} />
<Route
</Route>
</Routes>
</React.Suspense>
```
What versión is you using? You might be out of dated
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/*" element={<Outlet />}>
<Route path="informacion-financiera" element={<Financiera />} />
<Route path="derechos-de-autor" element={<Author />} />
<Route
</Route>
</Routes>
</React.Suspense>
```
You have browserRouter as Link so yow links are not links
Please tell me what's wrong in this when I am clicking on nav link the url is changing but the content is not changing
I am trying all the ways but can't figure out the problem, please have a look at this
App.js
import React, { Component } from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
import Nav from './components/Nav';
import Contact from './components/Contact';
class App extends Component {
render(){
return (
<React.Fragment>
<div id="page-wrapper">
<Router>
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/contact" exact component={Contact} />
<Route ><Default /></Route>
</Switch>
<Footer />
</Router>
</div>
</React.Fragment>
);
}
}
export default App;
My link file i.e nav bar
<Link to="/">
<li className="nav-item">HOME</li>
</Link>
<Link to="/about">
<li className="nav-item">About</li>
</Link>
Thanks in advance
Moving your BrowserRouter to index.js seems to work in my end.
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Then remove <Router> from your code.
I came from Angular framework to React and I got confused with router library. I'm trying to create Login page as a separate page in my app which is should contain Navigation and Footer which is part of Main.
I added this code to solve it but run into trouble.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './containers/Login';
ReactDOM.render(
<BrowserRouter>
<Route path="/">
<App />
</Route>
<Route path="/login">
<Login />
</Route>
</BrowserRouter>
, document.getElementById('root'));
//app.js
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/">
<Redirect to="/dashboard" />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/admin">
<Admin />
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
}
I'm using react-router-dom library.
So the main idea is I desire to load /login page without Navbar and Footer but for other pages in my app like Admin, Dashboard I want them to load with Navbar and Footer (I don't want use conditional rendering here).
But now when I go to /login page I see Navbar and Footer, also I can't go to dashboard.
Please try this.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './containers/Login';
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<App />
</Route>
</Switch>
</BrowserRouter>
, document.getElementById('root'));
//app.js
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/admin">
<Admin />
</Route>
<Route exact path="/">
<Redirect to="/dashboard" />
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
}
Add the exact property to the route element
In my experience, it is the best practice to place the root path('/') with ëxact props at the later route just before NotFoundPage.
I think it is the same as in Angular router.
Setting up react-router and I'm getting an error Uncaught Error: <Link>s rendered outside of a router context cannot navigate.. I've read up everything I could find on github and here but I didn't find a solution that worked.
Here are the files in question.
Main.js
import React from 'react';
import { BrowserRouter, Route, BrowserHistory } from 'react-router-dom';
import Header from './components/Header/Header';
import Home from './components/Home/Home';
import About from './components/About/About';
import Apply from './components/Apply/Apply';
import Raiding from './components/Raiding/Raiding';
import Resources from './components/Resources/Resources';
import Register from './components/Register/Register';
import Footer from './components/Footer/Footer';
const Main = () => {
return (
<div>
<Header />
<BrowserRouter history={BrowserHistory}>
<main>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/apply' component={Apply} />
<Route path='/raiding' component={Raiding} />
<Route path='/resources' component={Resources} />
<Route path='/register' component={Register} />
</main>
</BrowserRouter>
<Footer />
</div>
)
}
export default Main;
Header.js
import React, { Component } from 'react';
import {BrowserRouter, Link } from 'react-router';
const Header = () => {
return (
<header id="site-header">
<div className="container">
<img src="http://placehold.it/200x100" alt=""/>
<nav id="site-nav">
<Link className="site-nav-link" to="/about">About</Link>
<Link className="site-nav-link" to="/apply">Apply</Link>
<Link className="site-nav-link" to="/raiding">Raiding</Link>
<Link className="site-nav-link" to="/resources">Resources</Link>
<Link className="site-nav-link" to="/register">Register</Link>
</nav>
</div>
</header>
)
}
export default Header;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './app/Main';
import 'normalize.css';
import './index.scss';
ReactDOM.render(<Main />, document.querySelector('#root'));
What I am assuming is that the issue lies in the fact that my Header component (which contains Links) is out of context of the Main component (which contains the routing) but I haven't figured out a solution for it.
<Link> components depend on the context.router being present. context.router is set by the <BrowserRouter>. You should be rendering your <Header> component inside of the <BrowserRouter> and it will work as expected.
<BrowserRouter>
<div>
<Header />
<main>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/apply' component={Apply} />
<Route path='/raiding' component={Raiding} />
<Route path='/resources' component={Resources} />
<Route path='/register' component={Register} />
</main>
<Footer />
</div>
</BrowserRouter>
Side note, but BrowserHistory is not a thing in v4. The <BrowserRouter> is creating a history instance for you.