We Keep Coding

Dynamic React path Routing not matching url but matches on reload

.I am trying to move to a url using dynamic routing and using the React Link tag. The problem is that it changes the url but does not re-render the ui. When I use an anchor tag or when the page is refreshed it renders. I have been trying to detect the problem but I am currently stuck. I implemented somethings similar furhter below and its working fine.
Here is a snippet of my App.js
// Front end pages
if (isFrontEndPage()) {
return (
<Layout className="app-container">
<AppHeader />
<Layout>
<AppSidebar />
<Content className="app-content" breakpoint="lg">
<div className="container" style={{ minHeight: '100vh', padding: '10px' }} >
<Switch>
<Route path="/" exact component={Home} />
<Route path="/pricing" exact component={Pricing} />
<Route path="/features" exact component={Features} />
<Route path="/help/search/result.html" exact component={Post} />
<Route path="/help" exact render={(props) => <Redirect to="/p/help/invoices/index.html" /> } />
// I have a problem with this
<Route path="/p/:postType/:postCategoryUrlTitle/:postUrlTitle.html" component={Post} />
// I also have a problem with this
<Route path="/:postUrlTitle" component={Post} />
<Route component={NotFound} />
</Switch>
</div>
</Content>
</Layout>
<AppFooter />
</Layout>
)
}
return (
<Layout className="app-container">
<AppHeader />
<Layout>
<AppSidebar />
<Content className="app-content" breakpoint="lg">
<div className="container" style={{ minHeight: '100vh', padding: '10px' }} >
<Switch>
// The below similar links actually render accurately with dynamic routing
<PrivateRoute path="/posts/info-posts/new" component={InfoPost} />
<PrivateRoute path="/posts/info-posts/info-post/:infoPostId" component={InfoPost} />
<PrivateRoute path="/posts/info-posts" component={InfoPosts} />
<**************** OTHER PATHS ***********************>
<PrivateRoute component={NotFound} />
</Switch>
</div>
</Content>
</Layout>
<AppFooter />
</Layout>
);
}
export default App;
Below is a snippet of my Index.js
............
ReactDOM.render(
<BrowserRouter>
<AuthProvider>
<App />
</AuthProvider>
</BrowserRouter>,
document.getElementById('root')
);

When using React's Link component, the page doesn't refresh, it only switches the component/view, that is the way Link works. If you use anchor tag the page refreshes. Not sure what exactly is going on in your app, but from what I can see, I noticed that you are linking same component for more routes, maybe that is why your UI doesn't change

Finally solved the problem. Since I was already in the component that I wanted to route to, all I needed to do was to use React hook 'useRouteMatch' to actually render the component again using 'useEffect' when a change in params property of 'useRouteMatch' is detected.
...
const {postType, postCategoryUrlTitle, postUrlTitle } = useRouteMatch().params;
...
useEffect(() => {
// Now do stuff with the params
}, [postType, postCategoryUrlTitle, postUrlTitle]);

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.

With reactjs and react-router, could I display either a component or {this.props.children}?

Here is the scenario: I have a bunch of components that I allow certain words to be clicked, which will link to a reference page/component.
If the highlighted words are not clicked, I simply display the component (which mind you, there are many of them that allow this mechanism and a whole menu of them on the side).
Here is the current code:
//app.js
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App} handler={App}>
<IndexRoute component={Index}/>
<Route path="help" component={HelpPage}>
<Route path="/help/reference" component={ReferenceComponent}></Route>
</Route>
</Route>
</Router>,
destination
);
//help.js:
export default class HelpPage extends Component {
render() {
return (
<Grid>
<Title/>
<Row className="show-grid">
<Col lg={2} md={4} sm={4}>
<HelpMenu
getBtnId={this.getBtnId}
/>
</Col>
<Col lg={10} md={8} sm={8}>
//part that most matters (currently doesnt work)
{<HelpPanels panelIndex={this.state.panelIndex}/> ||
this.props.children}
</Col>
</Row>
</Grid>
)
}
}
I commented right above the part that most matters when rendering my HelpPage component.
I understand that what I am trying to do currently doesn't work. What I want is basically either you post one of the page's components, or if you are in the .../help/reference route you post that Reference component. Is there any way I can do this? I've messed around with it a bit, but so far, nothing.

Just change your route config so that according to the selected index you can show HelpPanels as child route under HelpPage and for reference route you show ReferenceComponent. Since reference route is a child route of help route you don't need to explicitly write full path as /help/reference in the config object.
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App} handler={App}>
<IndexRoute component={Index}/>
<Route path="help" component={HelpPage}>
<Route path="details/:helpId" component={HelpPanels}/>
<Route path="reference" component={ReferenceComponent}></Route>
</Route>
</Route>
</Router>,
destination
);
Then just display {this.props.children} under HelpPage Component.
export default class HelpPage extends Component {
render() {
return (
<Grid>
<Title/>
<Row className="show-grid">
<Col lg={2} md={4} sm={4}>
<HelpMenu
getBtnId={this.getBtnId}
/>
</Col>
<Col lg={10} md={8} sm={8}>
//if the route is /help/reference the children will be `ReferenceComponent` component or if it is something in the format /help/details/3 it will show `HelpPanels` component and this.props.params.helpId will be 3.
{this.props.children}
</Col>
</Row>
</Grid>
)
}
}

Render multiple components in React Router

I'm used to application layouts with multiple yield areas, i.e. for content area and for top bar title. I'd like to achieve something similar in React Router. For example:
<Router>
<Route path="/" component = { AppLayout }>
<Route path="list"
component = { ListView }
topBarComponent = { ListTopBar }/>
</Route>
</Router>
AppLayout:
<div className="appLayout box">
<div className="appLayout topBar">
{ -- display ListTopBar here -- }
</div>
<div className="appLayout content">
{ -- display ListView here -- }
</div>
</div>
Both child components should receive the same props.
How can I approach this?

To passe multiple component you can do like this :
<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
See the doc here :
https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components

In v4, according to the docs, you can render multiple components like this:
<Route path='/some-path' render={() =>
<Fragment>
<FirstChild />
<SecondChild />
</Fragment>
} />

Instead of using div's you can use Fragments.
`
<Route path='/some-path' render={props =>
<Fragment>
<Child 1/>
<Child 2/>
</Fragment>
} />
`

You can also use Array in latest versions of React-router-dom;
<Route path="groups" element={[<Component1/>,<Component2/>]} />
Will work just fine.

To render multiple components you can do this:
<Route
path="/EditEmployee/:id"
render={(props) =>
<div>
<NavMenu />
<EditEmployee {...props} />
</div>
}
/>
Here I'm passing parameter to specific conponent.

//this is the simplest method to render multiple components and it works for me
<Router>
<Route path="/">
<ListView />
<ListTopBar />
</Route>
</Router>

<Route path='/' element={<><Header /> <Home /></>} />
This worked for me in the latest react router dom v6

Another method is within the render method of route multiple passed components can be created using react.createElement
<Route render ={(props)=>React.createElement(Component1, {...props}},
React.createElement(Component2, {...props}}/>

What worked for me was to wrap the multiple components in a <Fragment> or a <div> as a parent element.
return (
< Router>
<div className="App" >
<Routes>
<Route path='/'
element={
<Fragment>
< NavBar />
< NewsLetterCard />
< TestimonialsCard />
< ServicesCard />
< ContactsCard />
< Footer />
</Fragment>
}
/>
</Routes>
</div>
</Router>
);
}

For v6, where you are using Routes instead of Switch to render your components. This works:
<Router>
<Routes>
<Route path='/' element={<><Child1/> <Child2/></>} />
</Routes>
</Router>
But for v5, this works:
<Router>
<Switch>
<Route path="/">
<Child1/>
<Child2/>
</Route>

This seem to work for me, I needed to add canvas animation component as background under homepage ("/") only:
import Page from 'pages/Page';
import Blog from 'pages/Blog';
import Post from 'pages/Post';
import Category from 'pages/Category';
import CanvasParticles from 'components/canvas/CanvasParticles';
...
<Routes>
{['/', '/:slug'].map((path, index) => {
return path === '/' ? (
<Route
exact
path={path}
element={[<CanvasParticles />, <Page />]}
key={index}
/>
):(
<Route path={path} element={<Page />} key={index} />
);
})}
<Route exact path="/blog" element={<Blog />}></Route>
<Route path="/blog/:slug" element={<Post />}></Route>
<Route path="/category/:slug" element={<Category />}></Route>
</Routes>

click on this you can view a image v6 feature : this is the simplest method to render multiple components and it works for me
Main Concept is to you should wrap with element
<Route path="/" element={<> </>}
or
wrap with in Fragment
<Route path="/" element={ }