I have a Nav.js file and an App.js file
Nav.js -
import { Link, Router } from 'react-router-dom'
render() {
return (
<Router>
<ul className="nav-list">
<li><Link to="/">Home<Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</Router>
)
}
App.js -
import Nav from './nav.js'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
render() {
return (
<Nav />
<Router>
<Switch>
<Route exact path="/" />
<Route exact path="/about" />
<Route exact path="/contact" />
</Switch>
</Router>
)
}
This doesn't work for some reason, but I feel like it should based off the react-router-dom docs. React Router seems like it should be simple but I'm having a hard time with the learning curve. I can't really get things to work the way I want them to. Does anyone know how it can be setup this way or have a good reference to clarify some things up for me?
You can address this issue in two files
but within the same BrowserRouter tags you have missed this in your given sample. It should be,
import Nav from './nav.js'
import { BrowserRouter, Route, Switch } from "react-router-dom"
render() {
return (
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" />
<Route exact path="/about" />
<Route exact path="/contact" />
</Switch>
</BrowserRouter>
)
}
hope this will help you.
In an app created by create-react-app (I am using reactstrap, but you can remove it and do without it):
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Nav from './components/Navigation'; // top (fixed) navigation
import Footer from './components/Footer'; // bottom (fixed) footer
import Home from './components/Home';
import One from './components/One';
import Two from './components/Two';
...
ReactDOM.render(
<Provider store={store}>
<div>
<BrowserRouter>
<div>
<Route path="/" component={Navigation} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/one" component={One} />
<Route path="/two" component={Two} />
</Switch>
<Footer />
</BrowserRouter>
</div>
</Provider>
, document.querySelector('#root'));
Navigation.js:
import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
class Navigation extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarBrand tag={Link} to="/">
<img src="/assets/images/book_lover.png" alt="book-lover!" />
</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink tag={Link} to="#">
</NavLink>
</NavItem>
</Nav>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
{this.props.loginEmail && <NavItem>
<NavLink tag={Link} to="/cats">Book-Categories</NavLink>
</NavItem>}
<NavItem>
<NavLink tag={Link} to="/howto">How-To-Use-This-Site</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/about">About</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<hr />
</div>
);
}
Related
I am making a single page website. I added the Bootstrap navbar to Menu.js using React Router but once I add the menu.js to App.js the website becomes blank. Besides the links are not working. They are supposed to jump to the given component on the same page.
Here is my code for App.js
import "./App.css";
import "./components/Introduction";
import Menu from "./components/Menu";
import Introduction from "./components/Introduction";
import Team from "./components/Team";
import Products from "./components/Products";
import Contact from "./components/Contact";
import BackgroundImage from "./components/BackgroundImage";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<div className="App">
<Menu />
<BackgroundImage />
<div className="container titel text-center">
<h1>Titel</h1>
<h2>
<em>Subtitle</em>
</h2>
</div>
<Introduction />
<Products />
<Team />
<Contact />
</div>
);
}
export default App;
Here is my code for Menu.js (Navbar)
import React from "react";
import "./Menu.css";
import { Navbar, Nav, Container } from "react-bootstrap";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Introduction from "./Introduction";
import Team from "./Team";
import Products from "./Products";
import Contact from "./Contact";
import App from "../App";
function Menu() {
return (
<Router>
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand as={Link} to={"/"}>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to={"/introduction"}>
Introduction
</Nav.Link>
<Nav.Link as={Link} to={"/products"}>
Products
</Nav.Link>
<Nav.Link as={Link} to={"/team"}>
Team
</Nav.Link>
<Nav.Link as={Link} to={"/contact"}>
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Routes>
<Route exact path="/">
<App />
</Route>
<Route path="/introduction">
<Introduction />
</Route>
<Route path="/products">
<Products />
</Route>
<Route path="/team">
<Team />
</Route>
<Route path="/contact">
<Contact />
</Route>
</Routes>
</Router>
);
}
export default Menu;
I had to use Routes instead of Switch (error message).
I tried to add the code between Routes to index.js and also to App.js. But none of them worked.
You have put Menu inside of App, and App inside a route of Menu. Yes, this will go wrong (;
I recommend having a layout like this:
export const App = () => {
return (
<BrowserRouter>
// On every page, could be nav
<Router>
<Route></Route>
<Route></Route>
<Route></Route>
<Route></Route>
<Route></Route>
</Router>
// On every page
</BrowserRouter>
);
};
And not have the Router inside of your nav.
In react-router-dom#6 the Route component API changed. Routed components are rendered on a single element prop, not as children components of the Route. You might also want to wrap App with the Router component and render the routes there separately from the navigation component.
Example:
function App() {
return (
<Router>
<div className="App">
<Menu />
<BackgroundImage />
<div className="container titel text-center">
<h1>Titel</h1>
<h2>
<em>Subtitle</em>
</h2>
</div>
<Routes>
<Route path="/" element={<App />} />
<Route path="/introduction" element={<Introduction />} />
<Route path="/products" element={<Products />} />
<Route path="/team" element={<Team />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}
...
function Menu() {
return (
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand as={Link} to="/">
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to="/introduction">
Introduction
</Nav.Link>
<Nav.Link as={Link} to="/products">
Products
</Nav.Link>
<Nav.Link as={Link} to="/team">
Team
</Nav.Link>
<Nav.Link as={Link} to="/contact">
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
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
I installed react-router-dom to switch between navbar elements. The library does not want to cooperate with my project. After clicking on the navbar element I am not redirected to the required component. Sometimes when I click on a selected item the menu moves slightly to the left. My code looks like this:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App />, document.getElementById('root'));
Navbar.js
import React, { useState } from "react";
import App from '../components/App'
import About from '../components/About';
import Services from '../components/Services';
import Contact from '../components/Contact';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const Navbar = () => {
const [navLinkOpen, navLinkToggle] = useState(false);
const handleNavLinksToggle = () => {
navLinkToggle(!navLinkOpen);
};
const renderClasses = () => {
let classes = "navlinks";
if(navLinkOpen) {
classes += " ' ' + active";
}
return classes;
};
return (
<nav>
<div className="logo">
<h4>Delightartco</h4>
</div>
<ul className={renderClasses()}>
<Router>
<li className="link"><Link to={"/home"}>Home</Link></li>
<li className="link"><Link to={"/about"}>About</Link></li>
<li className="link"><Link to={"/services"}>Services</Link></li>
<li className="link"><Link to={"/contact"}>Contact</Link></li>
<Switch>
<Route path="/home" component={App}>
</Route>
<Route path="/about" component={About}>
</Route>
<Route path="/services" component={Services}>
</Route>
<Route path="/contact" component={Contact}>
</Route>
</Switch>
</Router>
</ul>
<div onClick={handleNavLinksToggle} className="hamburger-toggle">
<i className="fas fa-bars fa-lg"></i>
</div>
</nav>
)
}
export default Navbar;
App.js
import React from 'react';
import '../../src/App.css';
import Navbar from './Navbar';
import Wrapper from './Wrapper';
import {Content, Winnie, Testimonials, Values, Secrets, Footer} from '../components/Content';
function App() {
return (
<div>
<Navbar />
<Wrapper />
<Content />
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />
</div>
)
}
export default App;
These are few issues in your code:
App is your root React component, and you gave it a route: <Route path="/home" component={App}></Route>. This is causing a recursive / infinite loop. App component inside App component.
Code structure looks complex.
Here is a proposed fixed code:
index.jsx:
ReactDOM.render(<App />, document.getElementById("root"));
App.jsx:
export default function App() {
return (
<StrictMode>
<Routes />
</StrictMode>
);
}
Routes.jsx:
export default function Routes() {
return (
<Router>
{/* Route components would be visible only at their route */}
<Switch>
<Route exact path="/about" component={About}></Route>
<Route exact path="/services" component={Services}></Route>
<Route exact path="/contact" component={Contact}></Route>
</Switch>
{/* Below components would be visible always at UI */}
<Navbar /> {/* Top navigation Link's */}
<Wrapper />
<Content />
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer /> {/* Bottom navigation Link's */}
</Router>
);
}
There are several things to keep in mind when using react-router.
The Router or BrowserRouter component should wrap all your routes and your links. Generally, if your app does not need more than one Router, its better to wrap your whole App with the Router.
The Link component's job is to simply navigate to the page and can be used anywhere you want to show a link to someplace e.g. in the Navbar.
The Route (not Router) component's placement is very important. It should be placed where you want to render the content. In your code you are rendering the routes in the Navbar and are unable to see the routes being rendered due to invalid / improper structure.
Navbar.js
Your Navbar should only contain the links while the Router should be on the top-level and the Switch / Routes should be placed where you want to render the content.
function Navbar() {
return (
<nav>
{/* Move `Router` to top-level e.g. in App.js */}
<ul>
<li className="link">
<Link to={"/home"}>Home</Link>
</li>
<li className="link">
<Link to={"/about"}>About</Link>
</li>
<li className="link">
<Link to={"/services"}>Services</Link>
</li>
<li className="link">
<Link to={"/contact"}>Contact</Link>
</li>
</ul>
{/* Move `Switch and Routes` to where you want to render the content e.g. in Content.js */}
</nav>
);
}
App.js
function App() {
return (
<Router>
<div>
<Navbar />
<Wrapper />
<Switch>
<Route path="/home" component={App}></Route>
<Route path="/about" component={About}></Route>
<Route path="/services" component={Services}></Route>
<Route path="/contact" component={Contact}></Route>
</Switch>
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />
</div>
</Router>
);
}
I have one React application where I have setup routes via the Navbar. Ideally it should switch but the routes are not switching. Am I missing something?
App.js:
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import NavigationBar from './navigation/NavigationBar';
import { Routes } from './navigation/Routes';
export class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavigationBar />
<Routes />
</BrowserRouter>
);
}
}
export default App;
naviagtion/NavigationBar.js:
import React, { Component } from 'react';
import { Nav, Navbar, Form, FormControl, NavDropdown, Button } from 'react-bootstrap';
export default class NavigationBar extends Component {
render() {
return (
<Navbar bg="light" variant="light">
<Navbar.Brand href="/">KitchenSmart</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/shop">Shop</Nav.Link>
<NavDropdown title="Sale" id="basic-nav-dropdown">
<NavDropdown.Item href="/sale">Winter Sale</NavDropdown.Item>
<NavDropdown.Item href="/sale">Summer Sale</NavDropdown.Item>
<NavDropdown.Item href="/sale">Spring Sale</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
navigation/Routes.js:
import React from 'react';
import {Route, Switch} from 'react-router';
import Products from '../Products';
import Shop from '../Shop';
import Sale from '../Sale';
import Checkout from '../Checkout';
import Default from '../Default';
const Routes = () => (
<Switch>
<Route exact path="/" component={Products} />
<Route path="/shop" component={Shop}></Route>
<Route path="/sale" component={Sale}></Route>
<Route path="/checkout" component={Checkout}></Route>
<Route component={Default}></Route>
</Switch>
);
export { Routes };
On the URL, the route is added, but the components are not changing. Am I missing something?
You have to use Link tag from react-router-dom in NavigationBar component i.e
<Link to="/">Home</Link>
<Link to="/shop">Shop</Link>
Add prop exact={true} to all your Route components. i.e
<Switch>
<Route exact path="/" component={Products} />
<Route exact path="/shop" component={Shop}></Route>
<Route exact path="/sale" component={Sale}></Route>
<Route exact path="/checkout" component={Checkout}></Route>
<Route exact component={Default}></Route>
</Switch>
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.