We Keep Coding

React nested route render the parent component with the child component

I am learning about React (Coming from ASP.NET). When I go to '/employee' it will display employee list table. But when I go to '/employee/create' it will display both the table and the create form. How to display only create employee form when I to '/employee/create' ?
export default class App extends Component {
static displayName = App.name;
render() {
return (
<Layout>
<Route exact path='/' component={Home} />
<Route path='/counter' component={Counter} />
<AuthorizeRoute path='/fetch-data' component={FetchData} />
<Route exact path='/employee' component={EmployeeIndex} />
<Route path='/employee/create' component={EmployeeCreate} />
<Route path='/employee/details/:id' component={EmployeeDetails} />
</Layout>
);
}
}

To do that, you will need to add a <Switch> around your Routes:
import { Route, Switch } from "react-router";
<Switch>
<Route exact path='/' component={Home} />
<Route path='/counter' component={Counter} />
<AuthorizeRoute path='/fetch-data' component={FetchData} />
<Route exact path='/employee' component={EmployeeIndex} />
<Route path='/employee/create' component={EmployeeCreate} />
<Route path='/employee/details/:id' component={EmployeeDetails} />
</Switch>
It works just like a normal `switch-case, will only render the first matching path within your Routes.
Without <Switch> it will render ALL matching routes.

Here what I use in my apps.
Make separate components for all pages and import in App.js under src. Make use of state and props to store the data and create ID. Install npm i react-router-dom to access react route.
import { Switch, Route, Redirect } from "react-router-dom";
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/employee" component={Employee} />
<Route exact path="/createEmployee" component={Create} />
<Route exact path="/employeeDetails" component={Details} />
<Redirect to = "/" />
</Switch>
for homepage - Home.js
for employee list table - Employee.js
create employee - Create.js
go to employee's detail - Details.js
Redirect to - will redirect to homepage if exact URL is not entered.

How to hide/show a component inside another component in ReactJS

I have my application looking something like below..
import FirstComponent from "./components/firstComponent";
import NextComponent from "./components/nextComponent";
import MyProgressComponent from "./components/progressComponent";
class App extends React.Component {
render() {
return (
<Router>
<div>
<MyProgressComponent />
<Route path="/" exact component={FirstComponent} />
<Route path="/nextComponent" component={NextComponent} />
</div>
</Router>
);
}
}
As we can see 'MyProgressComponent' is visible when we navigate between 'http://localhost:3000/' and 'http://localhost:3000/nextComponent' because it is directly nested under Router component in App component. But I want 'MyProgressComponent' to be visible only in 'http://localhost:3000/nextComponent' and hidden in 'http://localhost:3000/'. Any suggestion ?
I can do this by importing 'MyProgressComponent' inside each component wherever required but I don't want to duplicate it in each component.

You can render multiple components using the below syntax
<Route path="/nextComponent" render={() =>
<>
<MyProgressComponent />
<NextComponent />
</>
}
/>

Based on #Crocsx comment you can apply following check on your code.
<Router>
<div>
{this.props.location.pathname === "/nextComponent" ? <MyProgressComponent />: null}
<Route path="/" exact component={FirstComponent} />
<Route path="/nextComponent" component={NextComponent} />
</div>
</Router>

you can use switch provided by router to achieve this.
Something like below should work for you.
<Switch>
<Route exact path="/nextComponent" component={MyProgressComponent} />
</Switch>
<Switch>
<Route path="/" exact component={FirstComponent} />
<Route path="/nextComponent" component={NextComponent} />
</Switch>
more documentation is available here https://reacttraining.com/react-router/web/guides/basic-components

How to set up nested routes in react-redux application?

I am trying to set up a login page for my app, but when I try to redirect using this.props.history.push the new page does not render. My app uses redux which wraps my main file AsyncApp with Provider. AsyncApp has all my routes wrapped with various navigation bars that appear on every page. Now I am trying to do a login page but I don't know how to implement its route in my application since its route does not use the navigation bars therefore it will not reside in AsyncApp. I dont want to rename all my existing pages because the login page is the only page that does use the navigation bars.
I have tried making a component APP that is wrapped my the provider and has a route for the login page and the other routes. This isn't working.
Root.js
const store = configureStore()
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<App />
</Provider>
)
}
}
App.js
export default class App extends Component {
render() {
let arr = window.location.pathname.split('/');
let loc = arr[1];
if(loc === 'signin'){
return (
<Router>
<Route exact path="/signin" component={SignIn} />
</Router>
)
} else {
return (
<AsyncApp />
)
}
}
}
AsyncApp.js
class AsyncApp extends Component {
render() {
const { classes } = this.props
return (
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
<Hidden xsDown implementation="css">
<Navigator PaperProps={{ style: { width: drawerWidth } }} />
</Hidden>
</nav>
<div className={classes.appContent}>
<Header onDrawerToggle={this.handleDrawerToggle} />
<main className={classes.mainContent}>
<div>
<Router>
<Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
<Route exact path="/EditContracts/:contractId" component={EditContract} />
<Route exact path="/EditUsers/:userId" component={EditUser} />
<Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
<Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
<Route exact path="/Contracts/List" component={Contracts} />
<Route exact path="/Contracts/Create" component={CreateContract} />
<Route exact path="/Contracts/Import" component={ImportContract} />
<Route exact path="/Users/List" component={Users} />
<Route exact path="/Users/Create" component={CreateUser} />
<Route exact path="/Endpoints/Create" component={CreateEndpoint} />
<Route exact path="/Endpoints/List" component={Endpoints} />
</Router>
</div>
</main>
</div>
</div>
</ThemeProvider>
)
}
}
I expect to be able to keep AsyncApp how it is while being able to have a login page that can redirect to any page on AsyncApp.

1) Wrap the entire app around a router so you don't have to have multiple routers set up:
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
)
}
}
2) Utilize the Switch function to route your pages
export default class App extends Component {
render() {
<Switch>
<Route exact path="/signin" component={SignIn} />
<Route path="/" component={AsyncApp} />
</Switch>
}
}
class AsyncApp extends Component {
...
<Switch>
<Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
<Route exact path="/EditContracts/:contractId" component={EditContract} />
<Route exact path="/EditUsers/:userId" component={EditUser} />
<Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
<Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
<Route exact path="/Contracts/List" component={Contracts} />
<Route exact path="/Contracts/Create" component={CreateContract} />
<Route exact path="/Contracts/Import" component={ImportContract} />
<Route exact path="/Users/List" component={Users} />
<Route exact path="/Users/Create" component={CreateUser} />
<Route exact path="/Endpoints/Create" component={CreateEndpoint} />
<Route exact path="/Endpoints/List" component={Endpoints} />
</Switch>
...
3) In your SignIn component add a state variable called redirect that you set to true if you are signed in. Then
if (redirect) {
return <Redirect to="path/to/redirect" />
}
This will set up your routes and allow you to do your redirects w/out manipulating the window and refreshing the app

React router rendering wrong page

i am developing an web app and I am new to react router. Evrything was going great until I found myself in need to render a whole new page, with new navbar and all.
that's my app.js
class App extends Component {
render() {
return (
<BrowserRouter>
<div className='App'>
<Layout>
<Header />
<NavigationB />
<Search />
<Switch> {/* to swtich to the desired path. Nest all route here */}
<Route path='/' component={Home} exact />
<Route path='/login' component={Login} />
<Route path='/register-choice' component={RegisterButton} />
<Route path='/register-patient' component={RegisterPatient} />
<Route path='/register-professional' component={RegisterProf} />
<Route path='/profesional-dashboard' component={ProfessionalDashboard} />
</Switch>
</Layout>
<Footer />
</div>
</BrowserRouter>
);
}
}
So, I wanted to go to /professional-dashboard but without rendenring all the components above such and Header, Search, etc.
I tried to go to my index.js file and set it up like this
ReactDOM.render(
<BrowserRouter>
<Switch> {/* to swtich to the desired path. Nest all route here */}
<Route path='/' component={App} exact />
<Route path='/professional-dashboard' component=
{ProfessionalDashboard} />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
The idea was, in my form whenever I press register, it should send me to the dashboard of the professional.
At the end of my Register.js file you would find
const WrappedRegistrationForm = Form.create()(RegisterProf);
ReactDOM.render(
<BrowserRouter>
<div>
<WrappedRegistrationForm />
</div>
</BrowserRouter>
, document.getElementById('root'));
export default WrappedRegistrationForm;
I am using Ant Design, so the form renders WrappedRegistrationForm. At first it was not working then I wrapped it around BrowserRouter, I don't get the error anymore, but now when I press the register button, it takes me to /professional-dashboard but it loads app.js and not ProfessionalDashboard.js
Funny thing is, if I refresh the page, it loads ProfessionalDashboard.js normally.
Hope I'm explaining myself well.
Glad if you can help me!!

Hi could try something like this rendering the top one first if its a match if not it will go on to render the rest of the app :) hope this is clear
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path='/profesional-dashboard' component={ProfessionalDashboard} />
<StandarRoute path='/' component={MainPage} />
<Switch />
</BrowserRouter>
);
}
}
class MainPage extends Component {
render(){
return(
<div className='App'>
<Layout>
<Header />
<NavigationB />
<Search />
<Switch> {
<Route path='/' component={Home} exact />
<Route path='/login' component={Login} />
<Route path='/register-choice' component={RegisterButton} />
<Route path='/register-patient' component={RegisterPatient} />
<Route path='/register-professional' component={RegisterProf} />
</Switch>
</Layout>
<Footer />
</div>
)
}
}

Try including "exact" before component in your Route, or including "exact" before the 'To' in your Link

Try,
<Route exact path="/register" render={() => ( <Redirect to="/dashboard"/>)
Why do you render two times with reactDOM by the way? That might be what’s causing the issue too. Just exporting it and putting it in route component should suffice.

React router global header

I just started learning React, I'm trying to make a SPA blog, which has a global positioned fixed header.
import React from 'react';
import { render } from 'react-dom';
// import other components here
render((
<Router history={browserHistory}>
<Route path="/" component={Home} />
<Route path="/About" component={About} />
<Route path="/Contact" component={Contact} />
<Route path="*" component={Error} />
</Router>
), document.getElementById('app'));
So, each routes has the same header and from my angular background, I would use header outside ui-view.
Its a good practice to import the header component in each individual page component, or can I add the header component on my <Router><myHeader/><otherRoutes/></Router>?
Update:
I was thinking to use something like this:
Routes component, where I define my routes:
class Routes extends React.Component {
render() {
return (
<Router history={browserHistory}>
<IndexRoute component={Home} />
<Route path="/studio" component={Studio} />
<Route path="/work" component={Work} />
<Route path="*" component={Home} />
</Router>
)
}
}
And then on main Index.js file I would like to render something like:
import Routes from './components/Routes';
render((
<div>
<div className="header">header</div>
<Routes />
</div>
), document.getElementById('app'));
Can someone explain me? Thanks!

From my experience it can be good to define a layout component for your page, something like...
Layout Component
render() {
return(
<div>
<Header />
{ this.props.children }
/* anything else you want to appear on every page that uses this layout */
<Footer />
</div>
);
}
You then import layout into each of your page components...
Contact Page Component
render() {
return (
<Layout>
<ContactComponent />
/* put all you want on this page within the layout component */
</Layout>
);
}
And you can leave your routing the same, your route will render the contact page and in turn will render your header.
This way you get control of repetitive stuff that will be on multiple pages, if you need one or two slightly different pages you can just create another layout and use that.

I find this way useful:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from "./components/Header";
import Home from "./components/Home";
import Dashboard from "./components/Dashboard";
import Footer from "./components/Footer";
class App extends Component {
constructor() {
super();
this.state = {
stuff: stuff;
};
}
render() {
let { stuff } = this.state;
return (
<Router> //wrapper for your router, given alias from BrowserRouter
<div className="App">
<Header /> //this component will always be visible because it is outside of a specific Route
<Route exact path="/" component={Home}/> //at the root path, show this component
<Route path="/dashboard" component={()=><Dashboard stuff={stuff} />}/> //at the path '/dashboard', show this other component
<Footer /> //this is also permanently mounted
</div>
</Router>
);
}
}
export default App;
credit goes to: David Kerr

The question is already answered but I'm here to show another approach and say why I prefer that.
I also think that it's a good thing to have a Layout component
function Layout (props) {
return (
<div>
<Header/>
<div className="content">
{props.children}
</div>
</div>
);
}
But instead of render it into each route component you can render it just once as a parent for your routes.
return (
<Router>
<Layout>
<Switch>
<Route path="/about">
<About/>
</Route>
<Route path="/contact">
<Contact/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</Layout>
</Router>
);
This is good because in most cases you will not waste time with the layout and if you have different layouts you only need to work inside the Layout component.

For forcefully refresh Header inside routing. use forceRefresh={true}
const Routing = () => {
return(
<BrowserRouter forceRefresh={true}>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/list/:id" component={ListingApi}/>
<Route path="/details/:id" component={HotelDetails}/>
<Route path="/booking/:hotel_name" component={PlaceBooking}/>
<Route path="/viewBooking" component={ViewBooking}/>
<Route exact path="/login" component={LoginComponent}/>
<Route path="/signup" component={RegisterComponent}/>
</Switch>
<Footer/>
</BrowserRouter>
)
}

I've another solution that is make the routing like this
const Routing = () => {
return(
<BrowserRouter forceRefresh={true}>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/list/:id" component={ListingApi}/>
<Route path="/details/:id" component={HotelDetails}/>
<Route path="/booking/:hotel_name" component={PlaceBooking}/>
<Route path="/viewBooking" component={ViewBooking}/>
<Route exact path="/login" component={LoginComponent}/>
<Route path="/signup" component={RegisterComponent}/>
</Switch>
<Footer/>
</BrowserRouter>
)
}
and in the header file edit as this
import React, {useLocation} from "react";
const header = () => {
const location = useLocation();
return(
<div className={location.pathname === 'login' ? 'd-none': 'd-block'}>
abc
</div>
)
}
export default header;
this will hide the header panel in login page.