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>
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 know this question has been asked plenty of times. But sadly after implementing all of the possible solutions I still get a blank browser page after using Route, Routes.
My Code:
import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
function App() {
return (
<Router>
<Routes>
<Header />
<main className="py-5">
<Container>
<Route path='/' component={<HomeScreen/>} />
</Container>
</main>
<Footer/>
</Routes>
</Router>
);
}
export default App;
Thank You for for help!
Issues
In react-router-dom#6 the Route components can only be rendered directly by the Routes component or another Route component in the case of route nesting.
The Route component API also changed significantly. There are no longer any component or render and children function props. They are replaced by a single element prop taking a React.ReactNode, a.k.a. JSX.
Solution
Move the Routes component down the tree to directly wrap the Route component(s), and switch to using the element prop to pass the routed content.
function App() {
return (
<Router>
<Header />
<main className="py-5">
<Container>
<Routes>
<Route path='/' element={<HomeScreen />} />
</Routes>
</Container>
</main>
<Footer/>
</Router>
);
}
I think you shouldn't nest elements other than <Route> inside <Routes> component. When location changes, <Routes> looks on all of his <Route> children and choose the one that fits. You nested your <Route> element inside <Header> so probably that's the problem. Try to rearrange the structure and move Routes to the top level.
I'm working on my React website and I'm using React-router-dom for switching routes and React-transition-group to animate these routes. Everything is working just fine except I'm getting an error in my console when I switch routes.
Error :
I'm not that skilled in React yet and had this problem before and didn't fixed it. I've tried to google it but all I've found was to disable StrickMode and I think that's not the right solution.
App.js file
<Router>
<div className="App">
<div className="wrapper">
<Navigation />
<Route key="/" exact path="/">
{({match})=>(
<CSSTransition
in={match != null}
timeout={300}
classNames="slide-backward"
unmountOnExit
>
<div className="page">
<Home />
</div>
</CSSTransition>
)}
</Route>
<Route key="/about" exact path="/about">
{({match})=>(
<CSSTransition
in={match != null}
timeout={300}
classNames="slide-forward"
unmountOnExit
>
<div className="page">
<About />
</div>
</CSSTransition>
)}
</Route>
</div>
</div>
</Router>
Navigation component
<div className="menu">
<ul>
<li><NavLink to="/" exact activeClassName="active">Domov</NavLink></li>
<li><NavLink to="/about" exact activeClassName="active">O nás</NavLink></li>
</ul>
</div>
Many thanks in advance.
Slightly late - but for the sake of there being an answer here if anyone else comes across this..
OP - your issue stems from the react-transition-group package using findDOMnode in it's code, not yours; it looks like you can create a ref and pass this into your CSSTransition element in order to remove the error, see here if you want to try that out (make sure you're version of react-transition-group is up-to-date as well).
failing that, since you admit you're fairly new to React & there's no major pain points other than the warning it's probably safe enough to ignore this for now - it's likely future versions of these packages will remove findDOMnode and you won't see these errors.
Explanation
The warning stems from the use of the findDOMnode escape hatch built into react. This lets react find native elements in the DOM but this goes against reacts whole idea of not directly using the DOM
To avoid this, you should be using refs in order to point to elements, rather than using findDOMnode.
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
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.