React-router v4. How to navigate between routes? - javascript

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

Related

React Router Dom dos not renders child components

Here is my code
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
//import Login from "./components/Login/Login";
import Sidebar from "./components/sidebar/Sidebar.jsx";
import Topbar from "./components/topbar/Topbar.jsx";
import Home from "./Pages/home/Home";
import UserList from "./Pages/userList/UserList";
function App() {
return (
<Router>
<Topbar />
<div className="container">
<Sidebar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user" element={<UserList />} />
</Routes>
</div>
</Router>
);
}
export default App;
In the above code the Topbar and Sidebar components render but Home and Userlist components do not. What could be wrong?

How is routing done in react-router-dom version 6?

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

ReactJs Nested Route Switch in Class Component

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.

doesnot match reactjs navigation routing

I'm new to reactjs.I am trying to load my sidebar component and dashboard component at app starts.but when i click sidebar buttons it only loads that component and hide my sidebar
below is the pic of that....
below is the pic of when app starting
below is the picture when i click sidebar button it only load the relavant component and sidebar was hidden..!
this is my app.js
import React, {Component}from 'react';
import './App.css';
import {BrowserRouter,Switch,Route} from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Signin from "./components/auth/SignIn/Signin";
import './App.css';
import New3 from "./components/new3/New3";
import Dashboard from "./components/dashboard/Dashboard";
import {StyleRoot} from "radium";
import Item from "./components/item/Item";
import Profile from "./components/profile/Profile";
function App() {
return (
<BrowserRouter>
<StyleRoot>
<div className="App">
<Route path='/' exact component={Navbar} />
<Route path='/' exact component={Dashboard} />
<Route path='/signin' component={Signin} />
<Switch>
<Route path='/dashboard' component={Dashboard} />
<Route path='/item' component={Item} />
<Route path='/profile' component={Profile} />
</Switch>
</div>
</StyleRoot>
</BrowserRouter>
);
}
export default App;
how i fix this

React router and nested layouts

I have the following routes
import React from 'react'
import { IndexRoute, Route } from 'react-router'
import RootComponent from './containers/RootComponent'
import BaseLayout from './components/BaseLayout'
import AuthenticatedLayout from './components/AuthenticatedLayout'
import Auth from './containers/Auth'
import Dashboard from './containers/Dashboard'
import Inbox from './containers/Inbox'
import Schedule from './containers/Schedule'
export default (
<Route path='/' component={BaseLayout}>
<Route path='auth' component={Auth} />
<Route component={AuthenticatedLayout}>
<Route path="dashboard" component={Dashboard} />
<Route path='Inbox' component={Inbox} />
</Route>
</Route>
)
Questions:
When I visit "/", AuthenticatedLayout and Dashboard doesn't appear.
How can I fix this?
Is react-router supposed to be used like this?
EDIT:
I tried changing <Route path="dashboard" component={Dashboard} /> to <IndexRoute component={Dashboard} />. Same result.
If you want Dashboard to appear by default you should add Dashboard in as an IndexRoute instead of assigning it a path. If you would like /dashboard to also direct to Dashboard you can use a Redirect.
I solved the problem with the following routes:
import React from 'react'
import { IndexRoute, Route } from 'react-router'
import RootComponent from './containers/RootComponent'
import BaseLayout from './components/BaseLayout'
import AuthenticatedLayout from './components/AuthenticatedLayout'
import Auth from './containers/Auth'
import Dashboard from './containers/Dashboard'
import Inbox from './containers/Inbox'
import Schedule from './containers/Schedule'
import NotFound from './components/NotFound'
export default (
<Route component={BaseLayout}>
<Route path='auth' component={Auth} />
<Route component={AuthenticatedLayout}>
<Route path='/' component={Dashboard} />
<Route path='inbox' component={Inbox} />
</Route>
<Route path='*' component={NotFound} />
</Route>
)

Categories