Develop Reference

BrowserRouter, Route, Router, Routes not working

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.

Using App component as a home page in react (path "/")

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/>} />

How to open a react component in <main> when using react-burger-menu?

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"}
/>

The component is not re-rendered after linking on react-router

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>
);
}

React - Adding a tab to navbar that manipulates page data instead of invoking route redirect

I have a react App and I am using Browser router and a component named Navigation for navigation.
I want to know how to add a tab to the Nav that is not for navigation, but instead allows the user to manipulate a components JSX on a specific page.
I do not know how to structure this. I figure I could use the Context API (maybe?) but before I go down that rabbit hole I figure someone might know a different/better way.
Here is some dummy code
Nav.js
import React from "react";
function Navigation(props){
console.log(props)
return(
<ul>
<li>Landing</li>
<li>Test</li>
<button>Invoke some action on /test</button>
{/* If I am on a page named /test I want this button to have the abillity to trigger a function on that page*/}
</ul>
)
}
export default Navigation
App.js
import React from 'react';
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import Navigation from "./Navigation";
import Test from "./Test";
import { withRouter } from "react-router";
import {Switch} from 'react-router';
import logo from './logo.svg';
import './App.css';
function App(props) {
return (
<div className="App">
<BrowserRouter>
<div>
<Navigation/>
<Switch>
<Route exact path="/test" component={Test} />
<Route exact path="/some-stuff" component={Whatever} />
<Route exact path="/some-more-stuff" component={WhateverElse} />
<Redirect from="/*" to="/test" />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
export default withRouter(App);