I am learning to react and trying to build a nav bar. But when I tried to use route to make my navbar links functional or add pages. It shows me a blank page. But when I delete this portion <BrowserRouter>...</BrowserRouter>. My nav bar shows but as I don't use route there it won't show page components when I go to that page (i.e. http://localhost:3000/about).
Code:
import React, { Component } from 'react';
import './App.css';
import 'whatwg-fetch';
import Series from '../../containers/Series';
import Navbar from '../Navbar';
import {BrowserRouter, Route, Router, Routes} from 'react-router-dom';
import About from '../../pages/about';
import Home from '../../pages/home';
function App() {
return (
<>
<Navbar />
<BrowserRouter>
<Routes>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Did you read the docs of this library ? BrouserRouter is used to keep your UI in sync with the URL.
You have to read guide section first of all. If you look carefully you see that you must use Switch component like a wrapper for your Route's instead of Routes.
In your situation it must looks like
<>
<Navbar />
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</Switch>
</BrowserRouter>
</>
A Switch looks through its children Route's and renders
the first one that matches the current URL.
Related
I'm creating an e-commerce website using React Hooks and Router. Currently I have a blank home page, sign up and log in page. I want my background to change when the route changes to /signup. How do I add a background image when the Signup component loads? Below is my App component.
function App() {
return (
<BrowserRouter>
<Routes>
<Route exact path ='/' element={<Home />} />
<Route path='/signup' element={<Signup />} />
<Route path='/login' element={<Login />} />
</Routes>
</BrowserRouter>
);
}
You can add a current location check (using react router useLocation() method), and based on the desired value update css background:
import {Route, Link, Routes, useLocation} from 'react-router-dom';
const location = useLocation();
console.log('pathname', location.pathname);
this is my first question here and I apologize upfront if it already been answered. I'm studying react and I started a project as well, and my question is: how can I make my App component a home page? Or do I have to create a component to do so? I´m using react-router-dom for navigation, like the code below, and keep getting the message "No routes matched location "/"". How can I set a route to it? I would like to use the App component instead of using a page component named home. If I did something wrong about the post, again, I'm sorry. Thanks in advance.
import React from 'react'
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
import Blog from './pages/Blog'
import About from './pages/About'
import Faq from './pages/Faq'
import Market from './pages/Market'
import GlobalStyle from './styles/global'
function App() {
return (
<Router>
<GlobalStyle/>
<header>
<nav>
<Link to="/products">Nosso produtos</Link>
<Link to="/blog">Diário do Café</Link>
<Link to="/faq">Cafaq - perguntas frequentes</Link>
<Link to="/about">Sobre nós</Link>
</nav>
</header>
<Routes>
<Route path="/products" element={<Market />} />
<Route path="/blog" element={<Blog />} />
<Route path="/faq" element={<Faq />} />
<Route path="/about" element={<About />} />
</Routes>
<footer> Footer </footer>
</Router>
)
}
export default App
The App component is already your default component. Any path will render the App component as long as you have wrapped the App component with the BrowserRouter component
// In index.js
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
so I assume your point is to keep the navbar visible regardless of the current path and that is already done because anything placed in the App component will be rendered, and the paths content will be changed based on the elements specified in the Routes.
In case, you want to create a separate Home component, then you will create a Route with a path '/' and the Home Component element.
Make sure that you understand how routing works to avoid any bugs in the future
Hope you found it helpful.
The route element with path ="/" will be your home page
Try with this;
<Route path='/' exact element={<Home/>} />
Here is my code.
I am using react-burger-menu to implement the sidebar.
The sidebar is working properly.
My problem is how to open the Home or GG within the tag?
Now, when I click the link the browser shows the component content correctly, however, the sidebar disappears.
I want to keep the sidebar when I browse different component.
is it possible?
would you tell me if other modules can do so?
thank you very much
It works if you change your App.js to this:
import GG from "./GG";
import Home from "./Home";
import Main from "./Main";
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./style.css";
import Sidebar from "./sideBar/SideBar";
export default function App() {
return (
<Router>
<Sidebar pageWrapId={"page-wrap"} outerContainerId={"app"} />
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/home" component={Home} />
<Route exact path="/gg" component={GG} />
</Switch>
</Router>
);
}
and remove the following from Main.js:
<Sidebar
pageWrapId={"page-wrap"}
outerContainerId={"app"}
/>
I have a dropdown menu (maked on select/option) in my header. As planned, when user choose item in dropdown menu, react-router will change URL and make rerender page. I have a mistake on last stage. URL changes, but page not rerender
Link to SandBox
You must use a <Swtich> with routes to select where the matched routes will rendered. And wrap all of that in the <BrowserRouter> or <HashRouter>.
<div className="App">
<Router>
<Header />
<Switch>
<Route path="/stats" component={Stats}></Route>
</Switch>
</Router>
</div>
Link to the sandbox
All Route and Links Components should by wrapped by BrowserRouter, easiest way to do that is to wrap everything in your App.js return statement by BrowserRouter Component.
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import Stats from "./pages/Stats/Stats";
export default function App() {
return (
<Router>
<div className="App">
<Header />
<Route path="/stats" exact>
<Stats />
</Route>
</div>
</ Router>
);
}
I have a problem with implementing fully functional 404 page with React HashRouter.
routes.tsx
export const Routes = () => (
<HashRouter>
<Switch>
<Route path="/" exact={true} component={Home} />
<Route path="/route1" component={Route1} />
<Route path="/route2" component={Route2} />
<Route component={ErrorPage} />
</Switch>
</HashRouter>
);
app.tsx
<>
...
<Routes />
...
</>
Current behaviour:
When typing in address bar {url}/#/{non-existing-route}, then behaviour is correct - browser displays ErrorPage
When typing in address bar {url}/{non-existing-route}, then behaviour is incorrect - browser changes url to {url}/{non-existing-route}#/ and displays Home page.
I would like ErrorPage to be displayed in both situations.
This problem does not occur when I am using BrowserRouter, but I must use HashRouter here.
Thanks for your help in advance!