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.
Related
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
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.
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
I was working on the code of a practice for React, but I stopped because I have to make a navigation bar be shared among other pages
I found the next solution and it works but I don't know how exactly works; this is for a course project.
function Layout(props) {
return(
<React.Fragment>
<Navbar />
{props.children}
</React.Fragment>
);
}
I can't really know what really {props.children} does and how if Layout component start holding other components the Navbar component still appears
<Layout>
<Switch>
<Route exact path="/badges" component={Badges}/>
<Route exact path="/badges/new" component={BadgeNew} />
</Switch>
</Layout>
What happens behind the scenes?
props.children means that React will render whatever u put between Layout component.
For ex, if u put a div block between Layout components, props.children will be that div.
Every JSX code that you put inside the Layout-tag, will be placed in children property of props-object of the Layout Component.
<Layout>
<div>this is a child</div>
<AnotherReactComponentAsLayoutChild/>
</Layout>
I'm having trouble passing props down to different components when using react-router and trying to get props two levels down.
I have my main app.js where I'm immediately routing to my SplashPage component, then in SplashPage, I have my Authentication component called in the JSX (not via routing, just with some props).
The trouble is, my Auth component needs props from app.js, but since I'm referencing it in my SplashPage component, those props aren't being passed properly, resulting in a console error telling me that various functions it's trying to use don't exist (Warning: ___ is not a function)
Here's what my app.js JSX looks like. Right now I'm trying to pass props into SplashPage so I can also pass them from there to Auth, but no luck so far!
<Router history={BrowserHistory}>
<Switch>
<Route exact path='/' render={(props) => ( <SplashPage {...props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />)} />
<Route path='/auth' render={(props) => ( <Auth {...props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />)} />
<Route path='/packingList' render={(props) => ( <PackingList {...props} isAuth={this.state.isAuth} email={this.state.email} user={this.state.user} name={this.state.name} />)} />
</Switch>
</Router>
SplashPage component JSX:
<section className="splashPage">
<div className={this.state.topWallClasses}>
<h1>PackTracker</h1>
<button onClick={this.enterSite}>start tracking!</button>
<div className="overhang">
<img src="public/assets/backpackRed.png" alt=""/>
</div>
</div>
<div className={this.state.bottomWallClasses}></div>
<Auth isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />
</section>
Auth component JSX:
<Router history={BrowserHistory}>
<Switch>
<div>
<Route path='/packingList' component={PackingList}/>
<section className={this.props.authClasses}>
<ul>
<li><a href="" className="signup" onClick={this.formToShow}>Sign Up</a></li>
<li><a href="" className="login" onClick={this.formToShow}>Log In</a></li>
</ul>
{loginForm}
</section>
</div>
</Switch>
</Router>
As it is, the SplashPage component appears, and the Auth component appears, but I can't actually log in because I need to access functions and state in app.js.
Additionally, once I get that working, I then want to be able to route to a different component from Auth via JS, using something like:
this.history.push("/packingList")
No idea how I'd be passing props there either, but time will tell! ha
Hope I explained that well! Starts to get a bit hard for me to explain when there's multiple components involved. I can offer more info if not. Thanks!
This is because you are not passing the props through.
In your "SplashPage Component JSX":
<section className="splashPage">
<div className={this.state.topWallClasses}>
<h1>PackTracker</h1>
<button onClick={this.enterSite}>start tracking!</button>
<div className="overhang">
<img src="public/assets/backpackRed.png" alt=""/>
</div>
</div>
<div className={this.state.bottomWallClasses}></div>
<Auth isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />
</section>
Note the Auth component:
<Auth isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />
I don't see you passing any props through.. perhaps try something similar to your main Router rendering:
<Auth {...this.props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />