I'm building a single page application with React and React Router.
Whenever I'm on a page, for example "/banners" and I go to "/banners/edit/1234" everything works as expected. But when I use my browser buttons to go back to "/banners" I get redirected to "/". The same things happens when I use this.props.history.goBack();. It first redirects to the previous page and then immediately redirects to /.
How can I get the user to go to "/banner" or the previous page? Or is this not possible with React Router? Or does anyone has a suggestion where to look?
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'
import { PropsRoute } from 'react-router-with-props';
import Grid from '#material-ui/core/Grid';
import Content from './content.js';
import Edit from './edit.js';
import NotFound from './notfound.js';
import New from './new.js';
class Main extends Component {
render() {
return(
<Grid container justify="center">
<main>
<Switch>
<Route exact path="/:type" render={(props) => <Content {...props} tabs={this.props.data} />} />
<Route exact path="/edit/:type/:id" component={Edit} />
<Route exact path="/:type/new" component={New} />
<Redirect exact from="/" to={"/"+this.props.data[0].toLowerCase()} />
<Route component={NotFound} />
</Switch>
</main>
</Grid>
)
}
}
export default Main
For anyway reading this question.
Alright, so the problem did not seem to be the fault of React-Router. Somewhere in my code I checked the route with an array of allowed routes. For some reason this redirected wrongly. So that explains the redirects.
Related
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.
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>
);
}
The project I am working on is kinda of sensitive, but here's what I have that I can show you all.
When I click on one of the s in my NavBar, it changes the URL, but it does not change the view to the proper component. Does anyone have any idea why? If there's a better way I can phrase this or improve the quality of my questin, let me know.
My render that I return
<NavBar />
<BrowserRouter>
<div>
<Switch>
<Route path="/propertytypes" component={PropertyTypes} />
<Route path="/entitytypes" component={EntityTypes} />
<Route path="/associationtypes" component={AssociationTypes} />
<Route path={Routes.ROOT} component={Test} />
</Switch>
</div>
</BrowserRouter>
My NavBar
import React, { Component } from "react";
import { Link } from "react-router-dom";
class NavBar extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="/propertytypes">Props!</Link>
</li>
<li>
<Link to="/entitytypes">Ent!</Link>
</li>
<li>
<Link to="/associationtypes">Ass!</Link>
</li>
</ul>
</div>
);
}
}
export default NavBar;
After clicking Props link
Besides what #Ukasyah noticed about disparity between the Router you are using (you say you are using BrowserRouter) and the screen captures with the URL you are getting (that points out you are using HashRouter), you must be getting a problem with the code you are showing up because the <Link> component in order to work must be contained inside the BrowserRouter. In your browser console it must be happening this error:
Warning: Failed context type: The context router is marked as
required in Link, but its value is undefined.
So to avoid the problem and links start to work, your render should be something like this:
<BrowserRouter>
<div>
<NavBar />
<Switch>
<Route path="/propertytypes" component={PropertyTypes} />
<Route path="/entitytypes" component={EntityTypes} />
<Route path="/associationtypes" component={AssociationTypes} />
<Route path={Routes.ROOT} component={Test} />
</Switch>
</div>
</BrowserRouter>
Note that I put the NavBar component inside the div because BrowserRouter only allows to have a single child.
I have been looking at different SO questions to solve this issue and none of them helped. My problem was using BrowserRouter in multiple different components. Same as here.
For me, the issue was that my entire app was wrapped with a <Router>, because that was how the boilerplate code was set up. Then I was copying snips from BrowserRouter docs, and did not remove the <BrowserRouter> wrapper around the code. Nested routers won't work properly.
The mistake I made was, I started with the setup from the documentation, which involves using:
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
Then I started splitting everything into separate layout files like this. So I initially copied the whole import between multiple files. At some point I was cleaning up the code and realized I only needed to import the Switch but I foolishly forgot to remove the BrowserRouter as, and I ended up with:
import { BrowserRouter as Switch } from "react-router-dom";
Which is obviously wrong since it mapped BrowserRouter to Switch, you can't have nested BrowserRouter 's and that's what introduced the issue in my case.