I am having issues with routing in react-router-dom v6. My code is as follows :
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Link } from "react-router-dom";
function App() {
return (
//BEM
<Router>
<div className="app">
<Routes>
<Route path="/" element={[<Header />, <Home />]} />
</Routes>
</div>
</Router>
);
}
export default App;
Nothing gets rendered.
Please help.
You should be giving a single component to element property. Assuming that you wanna Header on top of every route, try with this :
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Link } from "react-router-dom";
function App() {
return (
//BEM
<Router>
<div className="app">
<Header />
<Routes>
<Route path="/" element={<Home/>} />
</Routes>
</div>
</Router>
);
}
export default App;
If you want to have Header only on path /, a cleaner way is to put it inside Home. Otherwise you could do it like so:
import { BrowserRouter as Router, Routes } from "react-router-dom";
import './App.css';
import Header from './Header';
import Home from './Home';
function App() {
return (
<Router>
<div className="app">
<Routes>
<Route path="/" element={<><Header/><Home/></>} />
</Routes>
</div>
</Router>
);
}
export default App;
Try to wrap multiple elements in Fragment
<Route path="/" element={<><Header/><Home/></>}/>
Have you tried wrapping them in fragment?
<Route path="/" element={<><Header/><Home/></>}/>
Related
I'm working on one of my friend's half-built React Project. I'm trying to route my react-app with react-router-dom. The components inside the <switch> are not working. Here's my
App.js
import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';
// Import react-router-dom
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Main} />
<Route path="/process" component={ProcessInput} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Main.js
import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';
class Main extends React.Component {
render() {
return (
<div>
<main>
<Slider />
<Card1 />
<Card2 />
<Prompt />
</main>
</div>
)
}
}
export default Main;
The <Header /> and <Footer /> which are outside the <Switch> are showing anyways as intended. But, I want the Main component to be loaded as a root component (Launcher).
There are no errors on the console.
Please help me get to know what am I doing wrong. Thanks in advance :)
<Route path="/" exact>
<Main/>
</Route>
<Route path="/process"><ProcessInput/>
</Route>
This is the old way to do it. You can try this
I am trying to display text in h1 tags but only about but about.js displays text. First one is shop.js component and second file is app.js file.
import React from 'react';
import './App.css';
function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
export default Shop;
My App component:
import React from 'react';
import Nav from './Nav';
import Shop from './Shop';
import About from './About';
import Home from './Home';
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Router path="/" exact component={Home} />
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Your routes and the Shop component itself look fine, so I'm guessing you just forgot to export the Shop component:
export function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
try adding shop route before home route like this:
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
<Router path="/" exact component={Home} />
i have created a code expample here
I have two components,
App and Dashboard
App Component is the main component, inside App, there is a switch to the Dashboard component
I need nested route, Inside Dashboard Component, I need to have "/dashboard/blogs" which switch the Blogs Component inside it.
Here I share the two components,
import React, { Component } from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
import Dashboard from "./dashboard/Dashboard";
class App extends Component {
render() {
return (
<div id="content-wrapper">
<Router>
<Switch>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/" component={Home}/>
<Route exact path="/dashboard" component={Dashboard}/>
</Switch>
</Router>
</div>
);
}
}
export default App;
import React, {Component} from 'react';
import Navbar from "./Navbar";
import SideBar from "./SideBar";
import "../scripts/dashboard";
import {BlogList} from "./components/BlogList";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {DashBoardHome} from "./components/DashBoardHome";
class Dashboard extends Component {
render()
{
return (
<div id="wrapper">
<SideBar/>
<div id="content-wrapper" className="d-flex flex-column">
<div id="content">
<Navbar/>
<div className="container-fluid">
<Router>
<Switch>
<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} /> //This is not working?
</Switch>
</Router>
</div>
</div>
</div>
</div>
)
}
}
export default Dashboard;
Thanks In Advance!
The problem is the exact keyword.
<Route exact path="/dashboard" component={Dashboard}/>
With this code snippet you basically say, that the Dashboard component should only be rendered when the URL address is exactly ".../dashboard".
<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} />
With this code snippet you say, that BlogList component should be rendered only when the URL is exactly ".../dashboard/blogs/", but it is rendered inside Dashboard component witch is not rendered, because the URL is not ".../dashboard".
Removing exact keyword from <Route path="/dashboard" component={Dashboard} /> should fix your code.
There is a #/ (hashbang) in my react route...
searching online yeilds covering <Route> with the new <BrowserRouter> will fix the problem
import React, { Component } from 'react';
import './App.scss';
import { observer } from 'mobx-react';
import { Header } from './components/Header'
import { Footer } from './components/Footer';
import { Route , BrowserRouter , Switch } from 'react-router-dom';
import MainState from './components/appset/MainState';
import HomePage from './components/HomePage';
import { TestContent } from './components/TestContent';
import { Account } from './components/Account';
import { TokenList } from './components/TokenList';
import { TokenPage } from './components/TokenPage';
import ErrorPage from './components/ErrorPage';
class Layout extends Component {
render() {
return (
<div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
<Header />
<div id="App-intro" className={this.state.resolutionHeight}>
<div className="container">
<div className="layout-main">
<BrowserRouter>
<Route path="/" exact component={HomePage} />
<Route path="/test" component={TestContent} />
<Route path="/account/:id" exact component={Account} />
<Route path="/token" exact component={TokenPage} />
<Route path="/token/:id" exact component={TokenList} />
<Route path="/operation/:id" exact component={HomePage}/>
<Route path="/error/:id" exact component={ErrorPage} />
</BrowserRouter>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
export default Layout;
It adds #/ by itself at the end of every route for example:
www.foo.com/account/tera
becomes
www.foo.come/account/tera#/
<BrowserRouter> did nothing at all.
Will building and uploading to a webserver instead of running on 'npm start' fix the problem?
(edit:) turns out <BrowserRouter> works but something just keeps adding#/to the end of my routes the routs without#/` works just fine
fix is in the <BrowserRouter> edit to <BrowserRouter basename="">
and cover the main div
<BrowserRouter basename="">
<div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
....
</div>
</BrowserRouter>
fixed all the routing problems!
Routing doesnt work.
It renders only first component Cloud on /, but when I add other routes in doesn`t work
import React from 'react';
import {render} from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory';
// import components
import Cloud from './components/Cloud';
import Dashboard from './components/Dashboard';
import Contacts from './components/Contacts';
import Account from './components/Account';
import Login from './components/Login';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Footer from './components/Footer';
const history = createBrowserHistory();
const App = (props) => {
return (
<Router history={history}>
<section>
<Sidebar/>
<div className="main-content">
<Header/>
<div id="page-wrapper">
<Route exact path="/" component={Cloud}/>
<Route path="/dashboard" component={Dashboard}/>
<Route path="/contacts" component={Contacts}/>
<Route path="/account" component={Account}/>
</div>
</div>
<Footer/>
</section>
</Router>
);
};
render(<App/>, document.getElementById('root'));
What am I doing wrong ?
screenshot and screenshot2
And how to jump between /home and /login routes if user cookies expired ?
Just put a / in front of your paths, i.e,
<Route exact path="/" component={Cloud}/>
<Route path="/dashboard" component={Dashboard}/>
<Route path="/contacts" component={Contacts}/>
<Route path="/account" component={Account}/>