How to share common components in diferent groups of pages - javascript

I am developing a website, but I have a problem, how can I create links that connect interfaces with different components within the same website?
I am trying to create a home page with a header that contains several links that allow access to several routes that maintain the same header and footer, but that when entering a specific link a page with its own components is displayed.
Furthermore, I don't know how to use react-router-dom for this, if you can help me I can give more details internally.
function App() {
return (
<div className='app__page'>
<Sidebar />
<Routes>
<Route path='/' element={<Body />}/>
<Route path='ingenieria-civil' element={<Ingcivil/>}/>
</Routes>
</div>
<div className='reading__page'
<Index />
<Routes>
<Route path='/estructurasmetalicas/diseñocortante' element={<Metcortante />}/>
<Route path='/geotecnia/ensayospt' element={<Spt/>}/>
</Routes>
</div>
)
}
The second div is not working because it shares <Sidebar /> component with those routes, but I want those routes to only share <Index /> component between them.
I was expecting to have two groups of pages with different shared components.

There is no hard and fast rule to achieve this
You can take reference from this pen
https://stackblitz.com/edit/react-ts-s62wbz?file=Component/ComponentOne.tsx

Related

React navigation bar is in the screen even though it is not on the router

We are trying to implement a react project that has 3 different types of the same application for 3 different purposes. Think of it like the user will choose which to use on the main screen. All 3 types has similar but different page structure, different navbar etc.
I used a router for the main page where they choose which application type they want to go, with path "/", and used different routers for different types for applications because their navbar etc. is different. But the navbar appears in the main screen even while it is not present in the router.
I know it sounds complicated but I will show it with code snippets and screenshots.
App.js
function App() {
return (
<>
<Router>
<Routes>
<Route path = "/" exact element={<CirclePage />}/>
</Routes>
</Router>
<Router>
<Routes>
<Route path = "/homepage-clubs" exact element={<HomepageClubs />}/>
</Routes>
</Router>
<Router>
<Navbar/>
<Routes>
<Route path='/homepage' exact element={<Homepage />}/>
<Route path='/events' exact element={<Events/>}/>
<Route path='/clubs' exact element={<Clubs/>}/>
<Route path='/contact' exact element={<Contact/>}/>
<Route path='/notifications' exact element={<Notifications/>}/>
<Route path='/profile' exact element={<Profile/>}/>
</Routes>
</Router>
</>
);
}
export default App;
Navbar is the navbar I wrote in react.
The home screen is like this atm: application screen at first initialization
I have no clue why there is a navbar below the screen. I may not have understood how really routers work, I am not sure. I need that navbar to go away because every type of application will have a different kind of navbar (I will create different navbars for them) and navbar should not be visible on the main screen. What could be the problem?
You are rendering all three routers at the same time, and the third one includes the Navbar component, which is also always rendered. You should use a single router to render all the routes. If you want different layouts for specific routes then you can use a wrapper component to render the Navbar. Render the last set of routes into a generic route that matches anything not more specifically matched, along with the Navbar.
function App() {
return (
<>
<Router>
<Routes>
<Route path="/" element={<CirclePage />} />
<Route path="/homepage-clubs" element={<HomepageClubs />} />
<Route
path="*"
element={
<>
<Navbar />
<Routes>
<Route path="/homepage" element={<Homepage />} />
<Route path="/events" element={<Events />} />
<Route path="/clubs" element={<Clubs />} />
<Route path="/notifications" element={<Notifications />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</>
}
/>
</Routes>
</Router>
</>
);
}

How do I Scroll to a certain section of the page in react js

I'm using react to develop a website.
I've implemented sections of the page as different classes and in my App.js file I have imported these classes such as <Header/>, <Section1/>, <Section2/> and <Footer/> which aggregate to make the web page.
My header has a button which I want to scroll down to section 2 starting when pressed.
How do I achieve this? If I create a scrollable function in my Header class, will it even work since to the Header other sections of the page are not visible.
Here is my Home page class which is made up of different sections
class Home extends Component {
render() {
return (
<div className="home-main-rect">
<Section1 />
<Section2 />
<Section3 />
<Section4 />
</div>
);
}
}
Below is the App.js file
function App() {
return (
<Router>
<div className="App">
<header className="App-header"></header>
<div>
<Heading />
<Switch>
<Route exact path="/" component={Home}></Route>
<Route exact path="/contact" component={ContactUs}></Route>
<Route exact path="/caseStudy" component={CaseStudy}></Route>
</Switch>
<Footer />
</div>
</div>
</Router>
);
}
I chose to add headers and footers in app.js as they are to appear in all pages.

React BrowserRouter <Link> doesn't load the component which accepts "/' exact Route - Path defined

My Navigation component code
import { BrowserRouter as Router, Link } from "react-router-dom";
<Router>
<header>
<ul className="social">
{/* Couldn't figure this out */}
{/* Link doesn't route properly but a href does */}
<li>
<Link to="/">
!Home
</Link>
</li>
<li>
Home
</li>
</header>
</Router>
Tag works for loading the webpage but tag doesnt work.
The class where I have defined my HashRouter and Switch.
When invoking " !Home " it doesn't load and nor outputs anything in the chrome/firefox console but this same link in href "Home" works and loads the page.
<HashRouter>
<Switch>
<Route
exact
path="/"
render={props => <Posts postsObj={this.state.blog} />}
/>
<Route
path="/post1"
render={props => <Post postObj={this.state.blog[0]} />}
/>
<Route
path="/post2"
render={props => <Post postObj={this.state.blog[1]} />}
/>
<Route
path="/post3"
render={props => <Post postObj={this.state.blog[2]} />}
/>
</Switch>
</HashRouter>
Calling "Main.jsx" from "MainApp.jsx"
<div>
<Header />
<section>
<Main /> // Calling function here.
<Nav />
</section>
<Social />
<Footer />
</div>
Github Source code : https://github.com/SensehacK/react-app
Thanks.
You have two parallel Routers (HashRouter is a special kind of Router component) in your project, one in the Header component and another in Main. Having multiple routers is confusing and could easily break routing, which is probably why your Link is not working as expected.
Since the HashRouter seems to be the one that's expected to work, you might want to move it to the top level, for example to the MainApp component and remove the other. Make sure whenever you use Link, it is nested in a Router (or HashRouter in your case) through its parents/ancestors.
Turns out I got confused between HashRouter and BrowserRouter.
I followed HashRouter in the main component and use
<Main Component>
<HashRouter> <Switch>
<Route exact path="/" render= {component_name1} />
</Switch> </HashRouter>
</Main Component>
And when I was trying to link the path "/" in different component towards "component_name1"
I was using <Link to="/" > Go Home </Link> ( BrowserRouter ) in my HashRouter routing definition.
So for HashRouter to work I need to use <NavLink to="/">Go Home</NavLink>
I was following 2 different sources and hastily forgot about differences of HashRouter and BrowserRouter by even their names and implementation.
Sometimes deadlines takes the best of you to even spot the basic stuff.
Thanks for the response though #Claire Lin
Github code fix commit

How can I group components in ReactJS

Problem
I need help to understand where I put my aside code.
The goal of him is rendered components like searchInput and menuStudy,
I'm thinking put in container's folder, but he does not have any logical objective like request or anything else, he only group and render these containers (SeachInputContainer and MenuStudyContainer).
What do you think if I put this in AsideContainer and call these containers?
Example
AsideContainer.jsx
[ ... ]
const Aside = () => (
<aside className="w-1/4">
<SearchInputContainer />
<MenuStudyContainer />
</aside>
);
[ ... ]
And in my App.jsx I just called this container to get All aside.
App.jsx
<div className="flex flex-wrap">
<Aside /> // all aside componentes live here.
<div className="w-3/4 pl-8">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
</Switch>
</div>
</div>
This makes sense?
Folder structure
It is a "wrapper", more than a "container", in fact it does not fetch data or manage child's props through its state.
A "wrapper" could be considered as a presentational component or a HoC if you want to implement it so it could wrap other components too.

React router <NavLink> component activeStyle/activeClassName not working with browser history

I have a router set up like this:
<Provider>
<Router history={browserHistory}>
<BFMRoot>
<ConnectedSwitch>
<Route path='/' exact component={BodyWelcome} />
<Route path='/login' component={Bodies.BodyLogin} />
<Route path='/register' component={Bodies.BodyRegister}>
</ConnectedSwitch>
</BFMRoot>
</Router>
</Provider>
My components look like:
<NavLink to={this.prepareRouteUrl(this.props.itemName)} activeStyle={{ backgroundColor: 'blue' }} activeClassName='active'>
<IconLabelButton
onPress={this.props.onSelect}
labelText={this.props.itemName}
fontName="FontAwesome"
iconLeftName={this.props.itemIcon}
hab='inline'
fluid />
</NavLink>
This works properly when the buttons are clicked. The navigation works properly, with the right components loading according to the path. However, when I click on the browser back/forward button, the views and path change correctly, but the active class and styles remain then same.
How can I make the active styles and class names work with the browser history (back/forward buttons)?
The react-router version is 4.2.0

Categories