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.
Related
I have the following route structure
src/routes/[slug]/results
src/routes/[slug]/about
I can't figure out how to link to the routes in SvelteKit. The routes themselves work when I access them through the browser navigation bar.
How can I create a simple links on the [slug] page, that will link to the child routes?
Both below link to the root:
results
results
Tried something like below, but that didn't work.
results
results
I assume it's something similar, but the SvelteKit documentation on routing and advanced routing don't mention anything related to navigation within dynamic routes.
Would just add the parameter to the link:
<script>
import { page } from '$app/stores';
</script>
Results
I figured it out, it was a bit hidden in the documents (and I'm a starter, so not fully aware of all the concepts yet).
In +page.js:
/** #type {import('./$types').PageLoad} */
export function load({ params }) {
return {
slug: params.slug
};
}
In +page.svelte:
<script>
export let data;
</script>
results
share
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');
});
Could someone help me to create popover in ReactJS UI, Something like below image.
You can do this quite easy using one of the popular ui component frameworks. For example bootstrap/jquery.
Follow the steps below and you will be fine:
In render method of the parent component prepare html layout in accordance with guidelines for the component:
Toggle popover
In componentDidMount method of the parent component:
$("#mypopover").popover();
And finally in componentWillUnmount:
$("#mypopover").popover('destroy')
I am building an application using angular and redux (ngRedux). Now i want to use react instead of angular for improvement in performance. It is a huge application so it is not possible to build it from scratch. So i want to use the routing of angularJS (angular-ui-router) and as any "abc" state become active then the react component become load and this react component should use the pure redux against every single event.
How can i maintain my application accordingly that a single module is build in react-redux and connected to angular only through routing state. Keep in mind that the other modules of application should also not be disturbed.
Well to render React components into Angular is quite easy. But I just assume you use directiveor component from angular already.
So in the case of directive you could skip the whole templating "none sense" and let React handle that for you
module.directive("reactTest",function() {
return {
link:function(scope,element,attr) {
class App extends React.Component {
constructor(props) { super(props) }
render <div></div>
}
element.replace(App);
}
}
});
So this how you would get React into Angular. Redux ist basically the same. You simple use the connect function of redux and off you go.
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.