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>
Related
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'm trying to wrap Routes using Layout component so it puts all content into a bootstrap 12 column grid.But it doesnt wrap my text inside Route components and I get a warning that functions are not valid as a React child. Here is the App.js code:
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Offers from './Offers';
import Financing from './Financing';
import Buying from './Buying';
import Contact from './Contact';
import Gallery from './Gallery';
import Search from './Search';
import Layout from './components/Layout';
function App() {
return (
<Fragment>
<Layout>
<Router>
<Routes>
<Route path='/' element={Home} />
<Route path='/fahrzeugangebote/' element={Offers} />
<Route path='/finanzierung/' element={Financing} />
<Route path='/fahrzeugankauf/' element={Buying} />
<Route path='/galerie/' element={Gallery} />
<Route path='/kontakt/' element={Contact} />
<Route element={Search} />
</Routes>
</Router>
</Layout>
</Fragment>
);
}
export default App;
And here is the code for Layout.js:
import Container from 'react-bootstrap/Container';
export const Layout = (props) => {
return(
<Container>
{props.children}
</Container>
)
};
export default Layout ```
As you can see in the docs, you have to provide the elements like this (ReactElement):
<Route path='/' element={<Home />} />
<Route path='/fahrzeugangebote/' element={<Offers />} />
// etc
I'm essentially having the same problem as this: React app HashRouter not working on localhost as well as Github User page
I used their solution but it only works with the first link I have up. Is there a way to get multiple links to work.
import React, { Component } from 'react';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import { Home } from './Home';
import { Music } from './Music';
import { FullCV } from './FullCV';
import { ContactMe } from './ContactMe';
import { NoMatch } from './NoMatch';
import { NavigationBar } from './components/NavigationBar';
import { Jumbotron } from './components/Jumbotron';
import { Container } from 'react-bootstrap';
import './mycssfile.css';
import { Helmet } from 'react-helmet'
class App extends Component {
render() {
return (
<>
<div>
<Helmet>
<title> My Website </title>
</Helmet>
</div>
<NavigationBar/>
<Jumbotron/>
<Container fluid className = "container">
<Router>
<Switch>
<Route exact path="/" component={(Home)}/>
<Route exact path="/fullCV" component={(FullCV)}/>
<Route exact path="/music" component={Music}/>
<Route exact path="/contactme" component ={(ContactMe)}/>
<Route component={(NoMatch)}/>
</Switch>
</Router>
</Container>
</>
);
}
}
export default App;
It works perfectly on my localhost with BrowserRouter but I need it to work with HashRouter.
Here is a sample of how I'm navigating
import React from 'react';
import headshot from './assets/headshot.jpg';
import headshot2 from './assets/headshot2.jpg';
import { Row, Col, Nav } from 'react-bootstrap';
import styled from 'styled-components';
import { HashRouter as Router, Route, Switch, Link} from 'react-router-dom';
export const Home = () => (
<div className = "homepage">
<Row>
<Col>
<Router>
<Switch>
<Route>
<Nav.Link as = {Link} to = "/fullCV"><h4> Full C/V and Resume </h4></Nav.Link>
</Route>
<Route>
<Nav.Link as = {Link} to = "/music"><h4> Music and Music Videos </h4></Nav.Link>
</Route>
<Route>
<Nav.Link as = {Link} to = "/contactme"><h4> Get in Contact with Me </h4></Nav.Link>
</Route>
</Switch>
</Router>
</Col>
<Col>
<img src = {headshot} height = {380} />
</Col>
</Row>
</div>
)
It only shows the first link, Full CV and Resume, but the rest don't show up.
Had the same issues as you!
How I fixed mine;
I was using BrowserRouter from react-router-dom, but switching to HashRouter fixed it for me.
import { HashRouter, Route, Switch } from 'react-router-dom'
return (
<HashRouter>
<React.Suspense fallback={loading}>
<Switch>
<Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
<Route
exact
path="/register"
name="Register Page"
render={(props) => <Register {...props} />}
/>
<Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
<Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
<Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
</Switch>
</React.Suspense>
</HashRouter>
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 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>
);
}