I'm having trouble implementing nested routes within react native using react router v4.
If the nested route is declared in App.js it works fine, however when it is declared within another component, redirecting doesn't work.
I was trying to follow the documentation here: https://reacttraining.com/react-router/core/guides/philosophy/nested-routes
Is it something simple?
I've created a simple repo which has all the code to replicate:
git clone https://github.com/814k31/TestReactNativeRoutingv4.git
cd TestReactNativeRoutingv4
npm install
npm run <platform>
https://github.com/814k31/TestReactNativeRoutingv4
Thanks to the react guys on concord
I needed to use relative links otherwise the router would look for a route within the root component (App.js) and wouldn't know about the nested route.
const Tacos = ({ match }) => (
// here's a nested div
<div>
<Route exact
path={`${match.url}/Carnitas`} // The "match.url" is critical here
component={Carnitas}
/>
TACOS
<Redirect to={`${match.url}/Carnitas`} push /> // And here
</div>
)
Related
I am trying to add page transitions to my Nextjs app. What should I do to add that?
You can use libraries like Framer Motion or Barba js.
You can install the dependency react-transition-group
$ npm install react-transition-group
create a transition_sample.js or transition_sample.tsxcomponent in the component folder
Next, import the transition_sample.js or transition_sample.tsx component to your layouts/MainLayout or _app.js or _app.tsx if you're doing this in the _app.js/_app.tsx be sure to replace children with <Component {...pageProps} />
Import useRouter from next//router and pass the pathname to location props
All done then use the MainLayout in your pages and to use the layout wrap your pages with MainLayout.
I have an app that was written mainly with class base react components, however we are implementing a paywall feature with Stripe.
The issue is stripe uses hooks, which don't work with class base components. Is it possible to put a child class base component into a parental function base component in order to achieve this. How would I go about doing this without rewriting every component as a function base component.
Every attempt to include a function base component with class base children always yields this error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Are there any work arounds, or should I re-write the all the components as functional components?
A quick example using react-router-dom for query parameters, then passing those into a class base child component.
function useQuery() {
return new URLSearchParams(useLocation().search);
}
const App = () => {
let query = useQuery();
return (
<Provider store={store}>
<Router>
<div className="App">
<Navbar />
<Switch>
{/* Public Pages */}
<Route exact path="/" component={Landing} ref={query.get('ref')} />
</Switch>
</div>
</Router>
</Provider>
)
}
export default App;
Then assuming that the landing components is a simple class base component that will set the prop into the state.
Component's type doesn't matter in relation parent-child. But you can't use hooks inside of classBased component. Only in functional ones
Here is the code example of Functional Component as Parent and Class as Child
import React , {Component}from "react";
import "./styles.css";
const App = () => {
return (
<div className="App">
<h1>I Am Parent Functional Component</h1>
<Child />
</div>
);
};
export default App;
class Child extends Component
{
render(){
return(
<h2>I am Class Child Component</h2>
)
}
}
Okay I figured out the issue with this problem. Since I found the same question unanswered on the internet, I decided to answer the question myself, Just for future reference for anyone looking for the same solution I was running into.
You can use Hooks on a parental Function Base Component and pass on the information into a child base component.
While rendering the application, I was given an error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
However this error was due to outdated modules in npm. I just updated the react-router-dom from 4.1 to 5.2.0 npm update react-router-dom and it seem to solve the issue of using functional base component as a parent.
After updating the module I was able to use a hooks in a parental function base component and pass that on to a child class base component using props.
I have a navigation component with custom routes. Now i want to make the
link active when visiting a page. But i cant find the right solution
because i am also using laravel. So what i need is to use react-router-dom with the react dom render method or something like that.
I am using the navigation in the header component and importing the header component in my pages.
Does someone have an idea how to fix this. Or what what direction i
should look.
index.js
if(document.getElementById('home__page')) {
ReactDOM.render(
<Home />,
document.getElementById('home__page')
);
nav.js
<nav>
<ul><li>home</li></ul>
</nav>
I could make 10 different pages and add routing to each of them and then render them in my index file. But that doesn't sound great.
react-router-dom includes a NavLink module which will render a <a/> element for you and has some built-in props you can use. For instance the activeClassName prop. This className will be applied to the element when the appropriate Route is active.
<NavLink to="/some-path" activeClassName="active">Link</NavLink>
When you define a react-router-dom Route to "/some-path" and this is the currently active path, the "active" className will be applied to the link element. You can use this className to change the styling for currently active links.
See the example here in the docs: https://reacttraining.com/react-router/web/guides/basic-components/navigation
my solution is using jquery to manipulate dom elements after loading
$(function () {
const menuLink = location.pathname;
if (menuLink === '/') {
$('.menu a[href^="/"]').first().addClass('active');
} else {
$('.menu a[href^="/' + menuLink.split("/")[1] + '"]').addClass('active');
}
});
Trying to clean my React app up a little with Container and Presentation components. I'm using react-router v4 and I previously used an onClick event for each job to show a specific job page:
<div onClick={() => this.props.history.push('/jobs/' + job.slug)}>
//The job info
</div>
Now I've created a dumb component in a separate file for the jobs like this:
const Jobs = (props) => (
<div>
{
props.jobs.map(job =>
<div key={job.slug} onClick(//todo)>
<p>{job.title} at <Link to="/">{job.company}</Link></p>
</div>
)
}
</div>
)
but I can no longer access this.props.history
How can I solve this issue? Should I pass another prop in the following:
<Jobs jobs={jobs}/>
To access router objects(match, history and location) via props of the component, either the component has to be rendered via Route or it should wrap with withRouter higher-order component.
Check whether your Jobs component is directly rendered via Route with something like this.
<Route path="/jobs" component={Jobs} />
If it's not the case, and Jobs component is rendered with JSX inside the render method of another component, then wrap it with withRouter higher-order component as follows before you export it.
export default withRouter(Jobs);
This will ensure that Jobs component has access to all the router props.
Also, make sure that you use props.history instead of this.props.history since now it's functional component.
I'm still learning React.js. Recently I've built a site using React.js. I was trying to add a demo page (pure html and javascript) to the react site. The demo page consists of an index.html, a bundle.js and a css stylesheet. I created a demo folder at the root of the react site and put the demo files inside that folder. My question is how I can get access to the demo page by going to http://reactsite/demo/
Do I have to use react router and wrap the demo page into a react component?
Thanks in advance!
To render pure html in with react yes you would need to use react-router to render a component at that url and then use dangerouslySetInnerHTML to read the html file as real html and not escape characters in the file
your route would be something like this
<Route path="demo" component={TemplateHTMLComponent} />
then your component would be something like this
const htmlFile = require('../some/path/to/html/file');
class TemplateHTMLComponent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: htmlFile}};
}
}