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/>} />
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.
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 got a navbar template from bootstrap and tried to configure react-router, the url changes but the pages aren't rendering not sure what if it has to do with my navbar or the router
import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./pages/home";
import Aboutus from "./pages/Aboutus";
import Services from "./pages/services";
import PrivacyPolicy from "./pages/PrivacyPolicy";
function App() {
return (
<Router>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Link className="nav-link" to="../pages/home.jsx">
Graphic-Lab
</Link>
</ul>
</nav>
<Switch>
<Route exact path="./pages/home.jsx">
<Home />
</Route>
<Route path="./pages/Aboutus.jsx">
<Aboutus />
</Route>
</Switch>
</Router>
);
}
export default App;
Attribute path of Route expects browser URL to match. Not path of file you want to display.
So it has to be something like this:
<Route path="/something">
<MyCoolComponent/>
</Route>
It renders MyCoolComponent for URL like https://example.com/something.
You can read path definition and see some example at the documentation.
There don't need to use file extensions, because you make an SAP, the file extensions need when you render different HTML pages on different routes, but in React you just imitate the pages with JS. Just use path="/home" and path="/about".
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.