0
133
ViewsReact Router V4 - Route between components and not entire page
I'm learning React with React Router V4. I have an image here that might explain what I would like to do:
- Click "Next" button
- Send click Event to Component A ("button got clicked")
- Clicking "Next" would also swap "Component B" with "Component C" while keeping everything the same on the page.
- Be able to navigate to a completely different page with different components after all this.
I'm having a really hard time figuring out the routing and structure to be able to handle this.
Thanks for the help.
Does what I'm trying to accomplish here is normal or is this weird and not recommended?
What I tried:
I tried leaving Component A Inside the router on top of everything - this works until you go to page 3 because then I can't remove it.
I've been trying to implement something similar to React Router v4 example on sub-topics. Basically creating a parent component that holds Component A and underneath it have two
< Match />, one for Component B and another for Component C. This hasn't worked either and I'm probably doing something very wrong here. https://react-router.now.sh/basicI've also been poking around reading many tutorials but they're all different versions of React and React Router. I thought this was simple but been banging my head for a week now without any progress.
2 answers
Answer question0
Ok I finally figured this out - maybe is not the right/perfect way but it seems to be working. I'll write the code here on how I structured the routing and my components. Remember that this is using react router v4 and things are a bit different that previous versions.
//Router file - index.js
//import React, BrowserRouter, React Dom, Header and Components A, B and C parent
//Create Root component, add BrowserRouter and add a subpath for browserRouter - needed for the nested routes
//Root component renders inside HTML element with an ID of main
//Have a Match for '/' (it will actually be to "/subpath")- then it renders Parent of ABC
import React from 'react';
import { render } from 'react-dom';//instead of importing ALL react dom we just import the render
//React Router V4 uses Match and Miss - if something Matches a path it will render the assigned component and you use Miss for a 404/not found page
import { BrowserRouter, Match, Miss } from 'react-router';
import Header from './components/Header';
import ComponentABCParent from './components/ComponentABCParent';
const Root = () => {
return (
<BrowserRouter basename="/subpathHere">
<div>
<div id="header">
<Header />
</div>
<div className="app-content">
<Match pattern="/" component={ComponentABCParent}/>
<Miss component={NotFound} />
</div>
</div>
</BrowserRouter>
)
}
render(<Root/>, document.getElementById('main'));
//Parent of A, B and C with nested route
//Create parent component - place inside ComponentA and two Match's
//One Match for Component B which is rendered immediately
//Second Match for ComponentC
import React from 'react';
import {Link, Match, Miss} from 'react-router';
import OracleCircle from './ComponentA';
import Intro from './ComponentB';
import StepOne from './ComponentC';
const ComponentABCParent = ({ pathname }) => {
return (
<div>
<ComponentA />
<Match exactly pattern={`${pathname}`} component={ComponentB} />
<Match pattern={`${pathname}component-c`} component={ComponentC}/>
</div>
);
}
export default ComponentABCParent;
//Component B - ComponentB.js
//Inside ComponentB I have a Link that points to ComponentC
import React from 'react';
import {Link} from 'react-router';
const ComponentB = ({pathname}) => {
return (
<div>
<h1>"Stack Overflow is not a tutorial website"</h1>
<Link to={`${pathname}component-c`}>Go to C</Link>
</div>
);
}
export default ComponentB;
//Component C - ComponentC.js
//Render ComponentC with funny answer
import React from 'react';
import {Link} from 'react-router';
const ComponentA = ({pathname}) => {
return (
<div>
<h1>"Your Momma is a tutorial website"</h1>
</div>
);
}
export default ComponentA;
Hope this helps
0
Maybe something like this would help you accomplish your task.
...
const ComponentA = ({children}) => {
return (
<div>
<div>COMPONENT A</div>
{children}
</div>
)
}
<Route path={/} component={SomeWrapper}>
<Route path={/doubled} component={ComponentA}>
<Route path={/b} component={ComponentB} />
<Route path={/c} component={ComponentC} />
</Route>
<Route path={/single} component={ComponentZ} />
</Route>