I am using Next.js and the next-routes library to create an app for Shopify. I'd like to use a container component to wrap a few routes but I cannot find how to do this in any documentation.
My pages are organized as such:
container.js
container/page1.js
container/page2.js
and my routes are:
module.exports = routes()
.add('container/page1', '/container/page1')
.add('container/page2', '/container/page2/:param')
Everything is working properly but I have no idea how to make the page routes go through the container using {this.props.children} like with React-Router
Related
I need help with this problem. My objective is to put a website inside a ReactJs web app. I tried using the iframe of ReactJs, it does not work.
Is there a way to use React Native WebView component inside a ReactJs web app?
Or is there a Webview Component in ReactJs
I do want the end-user to jump to another tab in order to use the website. I want them to continue to stay in the ReactJs web app and use the website.
The website that I am putting is a .Net website and I am doing a ReactJs project, not a React Native Project
simply using iframe should work as this exemple (source below)
since your giving an url to this iframe langage doesn't matter if it can be served in http(s)
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return <iframe src="https://<website>/" />;
}
}
ReactDOM.render(<App />, document.getElementById("container"));
As said in source the src url should be embeddable to be used inside an iframe if not you can use a reverse proxy to serve this url and change headers
source:
https://blog.bitsrc.io/best-practices-in-using-iframes-with-react-6193feaa1e08
I want to build an Inventory app, everything was smooth until i want to make a page with URL pattern like
http://localhost:8000/product/edit/1
So i have this route in my React Router
<Route path='/product/edit/:product_id' component={MyComponent} />
Im using Redux to handle the state and Axios to get the data.
The problem is when i call the API , it's calling an URL of http://localhost:8000/product/edit/api/get-product-by-id. Of course im not getting any data returned.
The question is how to setup the Laravel Route for this problem?
Here is my web.php file
Route::get('/{path?}', function () {
return view('index');
})->where('path', '^((?!api).)*?');
What's wrong with using this approach?
I hope this solves your problem.
Route::get('/product/edit/{id}', function () {
return view('index');
});
we have a CMS build on PHP, which uses custom modules.
Each module is rendered as HTML document and can be included(hooked) on every single page and has its own, dynamic aund unique ID in the html.
Now I would like to create a JavaScript Template System for this modules where the React appliaction could be rendered on each module.
For example I have created my react bundle. And I also have my single page with module which generates the modules with module html where react should be rendered. And I would like my react bundle to render on this id instead of:
ReactDOM.render(<App />, document.getElementById('root'));
The ID mod-123416-name is automatically created, so that I want with some code for example RenderReactOn("mod-123516-name") on the client side to render one react bundle on each module with this id.
So I can render the same react code on n different modules on the client side:
RenderReactOn("mod-123516-name");
RenderReactOn("mod-252141-name");
RenderReactOn("mod-453467-name");
Is this possible with react, or what are the best practices in such cases. Maybe I should take Knockout.js instead of react?
Thanks in advice
Tony
This is not a problem at all, I'd do it this way:
Bundle your Components (React Apps) in a single File:
import React from 'react';
import { render } from 'ReactDOM'
import ReactAppOne from 'ReactAppOne'
import ReactAppTwo from 'ReactAppTwo'
const Apps = {
ReactAppOne,
ReactAppTwo,
}
function renderAppIn(elementId, appId) {
const APP = Apps[appId]
if (!APP) return;
render(<APP />, document.getElementById(id))
}
// simply assign that function to the window
window.renderAppIn = renderAppIn;
In your rendered html:
<div id="some-app-123"></div>
<div id="some-app-xyz"></div>
<script src="/js/bundle.js"></script>
<!-- Render your Render Stamements -->
<script>
renderAppIn('some-app-123', 'ReactAppOne')
renderAppIn('some-app-123', 'ReactAppTwo')
// render the same app in another div
renderAppIn('some-other-div', 'ReactAppTwo')
</script>
I'm trying to build a React app, and getting some trouble with React Router.
First of all, my url always has some weird hashstring at its' end.
For example:
http://localhost:3000/#/?_k=gb3epe
Also, I'm not sure whether the hashtag in the url and the following gibberish are part of the same problem or if they're related to 2 different problems. (I'm currently using React-Router v1.0).
Secondly, I think that the weird URL is preventing me from using the "action" property on forms, and would also like to know if there is a better way to move around React renders then relaying on forms.
Thanks.
If we're talking about react-router v1.0, then to remove this hash string you should pass a { queryKey: false } parameter to the createBrowserHistory function.
var createBrowserHistory = require('history/lib/createBrowserHistory');
ReactDOM.render(
<Router history={ createBrowserHistory({ queryKey: false }) }
routes={ ReactRoutes } />,
document.getElementById('some-container')
);
To move between routes react-router provides Link component which you can use inside your components.
I want to create a website that uses React JS as the handler for the UI component and Backbone JS for the routing. I don't like to follow the usual routing, for example:
www.domain-name.com/blog1
www.domain-name.com/blog1/post1
www.domain-name.com/blog1/profile
I would like to achieve a routing similar to this:
blog1.domain-name.com
blog1.domain-name.com/post1
blog1.domain-name.com/profile
Can someone advice me where to start because I can't get my footing. If you can give me tutorial or books that can help me, that would be great.
Pardon me if this seemed to be a broad question.
I'm not exactly sure what you're asking, but there is a simple way to use your Backbone Router with React components / views. Just declare your routes like usual in Backbone, and have each route render the proper react component:
In your router:
routes: {
'signup': 'signup',
'posts/new': 'newPost'
....
}
newPost: function() {
reactMount = $('.react-mount')[0]
React.renderComponent(MyNewPostReactComponent, whateverProps, reactMount)
}
Then you just need to have the proper DOM element with .react-mount. You can have this be the empty body, and each of your routes just renders a full react component, for example.