Develop Reference

React Router is giving me a blank page

I am using the react router to create multiple webpages without changing my navbar and all it gives me is a blank page. I have tried multiple things such as a browser router, and switch and neither of them work.
function App() {
return (
<div className="App">
<Navbar />
<Router>
<Link to="/">Home</Link>
<Link to="/aggrid">Aggrid</Link>
<Route path="/" component={GhibliModal} />
<Route path="/aggrid" component={Aggrid} />
</Router>
</div>
);
}```

Well first things first, you need to wrap your whole App component with <BrowserRouter>, but I from what you said in the question, I would assume you already know that.
Secondly, you don't need the <Router> component. Read here.
From reading the documentation, all <Route> components must be wrapped in a <Routes> (note the 's' at the end) component.
And lastly, I'm pretty sure you cannot have <Link> components inside the <Routes> component.
Also, the component prop is now called element, so
<Route path="/" component={GhibliModal} />
should become
<Route path="/" element={<GhibliModal/>} />

You need to add <Outlet /> tag in the components that are loaded by Router.
I usually put it at the end of the JSX:
return (
<div>
<yourcodehere/>
<Outlet/>
</div>
)

Nesting routes in React using HashRouter

I'm creating dashboard/admin control panel application in React and I'm not sure how to handle component rendering correctly.
So at first my main App component looks like this:
<React.Fragment>
<div className="main--container">
<HashRouter>
<Redirect exact from="/" to="/login"/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/dashboard" component={Dashboard}/>
</HashRouter>
</div>
</React.Fragment>
And it works great, but after user is logged in I'm redirecting him to /dashboard where I want to nest other routes like /dashboard/foo or /dashboard/goo/
My dashboard component:
<React.Fragment>
<Sidebar/>
<div className="main--dashboard">
Here I want to render other components.
</div>
<button onClick={this.handleLogout}>Logout</button>
</React.Fragment>
Where <Sidebar/> is going to control which component should render next to the sidebar.
So my question is how to swtich routes and render appropriate components without affecting(Sidebar should be always present) <Sidebar/> component?

You can use like this
Dashboard.js
<React.Fragment>
<Sidebar>
<Login /> //as well <Register /> in Register.js
</Sidebar>
</React.Fragment>
Login.js
<div className="main--dashboard">
// Here you can render your components And also <Sidebar> remains as it is while redirects this.
</div>
<button onClick={this.handleLogout}>Logout</button>

routing within an app using react router to move to another page

I am trying to use router in my app
so I used react-router-dom, but I am facing issues,
researched and found this link but still not helping me.
Invariant failed: You should not use <Route> outside a <Router>
can you tell me how to use route and link
i need to redirect to another page.
providing my code snippet and sandbox below.
https://codesandbox.io/s/still-smoke-uf731
let Channel = ({ channelName, channelString, onClick, active }) => (
<div onClick={onClick} className=" col-lg-2 col-md-4 col-sm-6 ">
<div>router</div>
<Router>
<Link to={"/here"}> here</Link>
<Switch>
<Route path="/auth" />
<Route path="/" />
</Switch>
</Router>
<div
className="channel-button"
style={{
backgroundColor: active === channelString ? "orange" : ""
}}
>
<p>{channelName}</p>
</div>
</div>
);

Use exact as an attribute in your home route like the following code.
<Router>
<Link to={"/here"}> here</Link>
<Switch>
<Route exact path="/" />
<Route path="/auth" />
</Switch>
</Router>

I checked your sandbox. Looks like a good start, but you messed some things up.
Here is my fork of your sandbox: https://codesandbox.io/embed/staging-fast-rr5k9
First, don't put react components in the containers, put them in the components folder and import them.
What was going on was, that you had brand new <Router> for every page you had. So I pulled the Router out. Its also not imported correctly. It should be
import { BrowserRouter as Router } from "react-router-dom";
So you pretty much need something like this
<div>
<Link to={"/bbc-news"}>BBC</Link>
</div>
<div>
<Link to={"/cnbc"}>CNBC</Link>
</div>
<Switch>
<Route
key={"fbbc-news"}
path="/bbc-news"
render={p => <Channel channelName="BBC" channelString="bbc-news" />}
/>
<Route
key={"cnbc"}
path="/cnbc"
render={p => <Channel channelName="CNBC" channelString="cnbc" />}
/>
</Switch>
</Router>
Where Channel component renders whats inside the channel. the key in Route is important, because it makes React properly trigger componentDidMount, which calls the thunk action which fetches (that one is perfect).
Then to access the results from fetch, which you have placed in Redux =>
const mapStateToProps = state => ({ json: state.json });
You don't need a lot of the things you had, so I have removed them, like the onClick, which was trying to do react routers job

You can try this:
import Stats from './containers/stats';
<Route
exact={true}
path="/"
component={Stats}
key="Mykey"
/>

How to use react-router to navigate component with multiple pages

Suppose that I have 2 pages and several components. The first page is the login page and the other page is the main menu. The login page only has 1 component. Once the user has logged into the website I want react-router to navigate to the main menu, the main menu has navbar and some components right down below. I want it to be able to navigate to each component and keep the navbar at the top all the time even the URL has been changed.
Here the code I've tried
// Inside the root component
<BrowserRouter>
<Route path="/menu" component={MenuForm}/>
<Route path="/login" component={LoginForm}/>
</BrowserRouter>
//Inside the menu page component
<Navbar/>
<Route path="/shop" component={Shop}/>
<Route path="/categories" component={Categories}/>
With this code, I can only navigate to menu page and login page, but I can not navigate to Shop and categories which are the child component of main menu

You need to have home page
<Route path="/home" component={Home}/> // all your menu and everything here
now if from home you want to go to menu
you can do like this
<Route path="/home/menu" component={Menu}/>
This component will render in home page where you set nested routes so matching route component will render
<Route path="/home/menu" component={menu}/>
<Route path="/home/profile" component={Profile}/>

I suppose you should consider creating container components. Where the first container will be containing your login routes namely "Auth Container", and the another components should be into the App routes namely "App Container". And you can have your own wrapper.
const AppRoutes = () => {
return (
<>
<Navigation scrolling={scrolling} />
<Switch>
<ProtectedRoute exact path="/profile" component={UserProfile} />
<ProtectedRoute exact path="/my-orders" component={MyOrders} />
<ProtectedRoute path="/my-saved-result" component={SavedResults} />
</Switch>
</>
)
}

If you are using react-router v4, you could you Switch component to declaratively define your routes like below:
import { Switch, Route, Redirect } from 'react-router-dom';
const MenuForm = () => (
<div className="app-routes">
<NavBar />
<Switch>
<Route exact path="/menu">
<Redirect to="/menu/shop" />
</Route>
<Route path="/menu/shop" component={Shop} />
<Route path="/menu/categories" component={Categories} />
</Switch>
</div>
);

I'm using like this
<div className="main-panel">
<Navbar />
<div className="content" style={{ backgroundColor: '#f4f3ef' }}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/reports" component={ReportMain} />
<Route path="/showWebService" component={ShowWebService} />
</Switch>
</div>
</div>
The navbar is static when you navigate to link its only getting these component render.
<Link to="/reports">
<p>Reports</p>
</Link>
Call component with Link

React Router Link Not Working After Render in IE

I have run into an issue where React Router's NavLink is not working upon the initial render of a dashboard screen, after a successful login. After trying many different things I am posting here. You probably won't know why either but its worth a shot.
An example layout of the dashboard is as follows:
<div>
<nav>
<NavLink>Link 1</NavLink>
<NavLink>Link 2</NavLink>
<NavLink>Link 3</NavLink>
<NavLink>Link 4</NavLink>
</nav>
<div>
<!-- CONTENT -->
</div>
</div>
Upon initial render Link 2 will be unresponsive, while Link 1, 3, and 4 work fine. Clicking Link 3 for example will render new elements in the content section and then Link 2 will work.
I have tried even changing the NavLinks to anchor tags and adding my own click handler, but no matter what I try the second Link will not work until some mysterious event takes place.
Any ideas?
Edit* Add routes for #arracso
Authenticated Route:
<Switch>
<Route path="/route-1" component={SomeComponent} />
<Route path="/*" component={Dashboard} />
</Switch>
Dashboard:
<Row>
{navigationElement}
<Column>
<Switch>
<Route path="/1" component={A} />
<Route exact path="/2" component={B} />
<Route path="/2/1" component={C} />
<Route path="/2/1" component={D} />
</Switch>
</Column>
</Row>