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');
});
Related
I've got a small issue with routing with AngularJS using Laravel. When I have a url like www.example.com/blog and I refresh, it will load fine under the AngularJS UI Router, however, when I have www.example.com/blog/1 and I refresh it shows the Laravel-side 404.
I have my web.php set-up like this:
Route::get("/", function(){
return view("index");
});
Route::get('/{all}', function () {
return view('index');
});
I also have $location.html5Mode(true); in AngularJS and also my <base /> and the routes are all defined accordingly.
Can anyone shed some light on this?
For future reference and people coming here from search results.
Route::get('/{all}', function(){
return view('index');
})->where(['all' => '(.*)'])
A where is needed to catch all after the initial / This isn't explicitly noted in the documentation: https://laravel.com/docs/5.6/routing#parameters-regular-expression-constraints
In one of my website in laravel, when I tried to integrate angularjs4 everything works fine. But I am facing a conflict issue with api routes and route defined in web
The code in my web.php is as follows
Route::get('/{path?}', function () {
return view('site');
})->where('path', '.*')
->name('siteapp');
Since the above code route everything to the view "site", I cannot able to add api request routes in api.php, example is given below
The link www.mysite.com/api/user routes to the route in "web.php" which should be from api.php
Route in my api.php
Route::get('user', function (Request $request) {
return ['name' => 'demo'];
})->middleware('jwt.auth');
Is there any regular expression to skip the path begin with www.mysite.com/api/something
I.e. from web.php. Is there any rule to skip path? begin with api in this line "where('path', '.*')"?
As a brief is it possible to skip path begin with api in the rule where('path', '[api]! [---allow all other string-]')
Please adivice
You can use a regEx for that like this :
Route::get('/{path?}', function () {
return view('site');
})->where('path', '^(?!api).*$')
->name('siteapp');
In current setup, I'm building multi-page universal web application (using react-router to do routing on both server and client). This project doesn't use any (redux) store (which I consider unneccessary for now).
One of component responsible for fetch data from remote API, done inside componentWillMount method.
When render on server, the component will fetch data, do rendering and send rendered HTML to client.
When client mount HTML with ReactJS, it fetch data once again from componentWillMount method. That's cause unneccessary double data fetch.
Does it have any solution?
Thanks for answer from Dominic Tobias.
I tried develop a couple solution but I found one that suitable for me.
First, I decided not to fetch data either in componentWillMount or componentDidMount inside component, but create a static method call fetchData which return Promise like this:
class PageContainer extends Component {
static fetchData(params) {
return fetch('...URL...')
}
render() {
const {data} = this.props;
//render logic here
}
}
and on server side, call PageContainer.fetchData and wait until promise is fulfilled, pass data as props to PageContainer and render HTML with hydrated data like this
<html>
<head></head>
<body>
<div id="roor">{..react rendered HTML..}</div>
<script>window.__DATA__ = {..data..}</script>
</body>
</html>
like I said, for this app, I think that redux is unnecessary for now.
Then, there is a problem on client side routing which is react-router cannot load async data. To fix that, I went looking for AsyncProps and write my own tiny version of that, called AsyncComp. You can bootstrap React on client side with react-router like this:
const Root = <Router history={browserHistory} routes={routes} render={(props) => <AsyncComp {...props} data={window.__DATA__}/>}/>
ReactDOM.render(Root, document.getElementById("root"));
That's all.
PS. After I built AsyncComp, it can also be used on server side like this:
AsyncComp.fetchData(routerProps)
.then((data) => {
const html = ReactDOM.renderToString(<AsyncComp {...routerProps} data={data}/>)
res.render('index', { html: html, data: data })
})
Since your data already exists you should have a function which will make a conditional fetch which you can call on both the server and componentDidMount (you're not supposed to make ajax calls in componentWillMount).
For example this is how a component looks for me using redux:
class User extends Component {
static readyOnActions(dispatch, params) {
return Promise.all([
dispatch(UserActions.fetchUserIfNeeded(params.id))
]);
}
componentDidMount() {
User.readyOnActions(this.props.dispatch, this.props.params);
}
If this is the current page then the server will call the readyOnActions, and on the client componentDidMount can call the same thing - the action called fetchUserIfNeeded will only make an AJAX request if the server hasn't already done it by checking if the data already exists (and you can add further checks such as if it's valid, if it's not already fetching etc).
I am currently using firebase hosting for my single page React application. I have also added a 404.html page to my public directory. My assumption was that this page would get served if a user enter an url that is not in my routes(using react-router), but there is no way for firebase to know if an url is valid or not, or is there. Currently if I enter something random after the / of my main app url the page just shows blank. Is this something i need to account for within my React app, if so HOW?
You can partially solve this using firebase.json configuration, but because Firebase Hosting only serves up static content you'll have to handle some of the logic in your JavaScript. A simple catch-all looks like:
{
"hosting":{
"rewrites":[{"source":"**","destination":"/index.html"}]
}
}
However, you can create more specific rewrites to match your application's route structure, for instance:
{
"hosting":{
"rewrites":[
{"source":"/users/*","destination":"/index.html"},
{"source":"/account","destination":"/index.html"},
{"source":"/posts/*","destination":"/index.html"},
]
}
}
In the above example, /users/foo would route to /index.html but /unknown/url would route to 404.html.
The above gets you part of the way there, but doesn't know about your actual application data. If /users/foo is not a valid username, you'll need to display a not found message using JavaScript in /index.html.
You can let the React Router take care of serving a 404 page on the client side. This is how you can setup:
var NotFound = React.createClass({
render: function() {
return (<h1>Page Not Found</h1>);
}
});
var App = React.createClass({
render: function() {
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="first" component={SomeComponent}/>
<Route path="second" component={SomeOtherComponent}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
}
});
Note that the catch all route (*) should be the last so that React Router can try all others and finally get to this.
Here's a nice article that explains this.
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.