I have developed a page with react whose route is
http://example.come/page1
When the url is loaded I need to append a slash at the end of the url like this
http://example.come/page1/
My Routes are like this
Router history={browserHistory}>
<Route path='/' component={Home} />
<Route path='/page1' component={Page1} />
</Router>
I tried to change the path directly to "/page1/" instead of "/page1" but this will not load http://example.com/page1 , It will open only http://example.com/page1/
I want both the path to load the Page1 component
According to this reply, https://github.com/ReactTraining/react-router/issues/820#issuecomment-256814655
Using hooks (onEnter and onChange) with react-router v2 or above may achieve what you need.
Above answer will work fine and you will achieve what you need. But there is a catch. Open developers tool and click on network tab then refresh your page....you will see status 302 page redirect from WITHOUT trailing slash path to WITH trailing slash path.
And this is not very good. Atleast set status to 301.
How to set status ? https://github.com/ReactTraining/react-router/issues/458
Better resolve the problem from web server, like Nginx, which rewrites the url to add the trailing slash at the end of url.
Related
I am trying to have URLs be unique identifiers in my route. This requires "/" be treated as strings somehow. I was wondering if someone knew how this could be done?
Here is an example of the code.
<Routes>
<Route path=":url" element={<UrlPage />}} />
</Routes>
So lets say we go to www.website.com/https://stackoverflow.com/questions/ask
I would want "https://stackoverflow.com/questions/ask" to be the URL. How do I get the entire "https://stackoverflow.com/questions/ask" to be treated as string by react router.
Update:
The following will treat everything a string but if a URL has a ? everything to the right will be ignored.
<Routes>
<Route path="*" element={<UrlPage />}} />
</Routes>
This isn't a good idea in general - not only will you have to set this up serverside to deploy this somewhere, but URLs containing / shouldn't be used as subdirectories.
If you really need to, I would URL-encode the address first like this:
www.website.com/https%3A%2F%2Fstackoverflow.com%2Fquestions%2Fask
Disclaimer: I'm pretty sure this is a duplicate, because there's no way no one asked this, but I don't know if i searched the wrong terms or so but I couldn't find an answer, so I'll ask here.
I'm using React routers (react-router-dom), so for example if I set:
<Route path='/home' component={Home} />
At this point, obviously, if I go to localhost:3000/home it will load my homepage, right?
But if I go to localhost:3000/fjnisodjuhfosij (just random text) it will load anyway a blank page, it won't say something like "this page doesn't exist" or just redirecting to the home.
How can I handle this? Thank you
Just add Route with path '*':
<Route path='*' component={YourComponent} />
To direct to home: Add this as the last route in switch: <Route><Redirect to="/home"/></Route>
Or, to show a 404 error page: Create a component for the error page (NotFound lets say) and add it as the last route: <Route component={NotFound} />
So full disclosure, I'm not sure how to ask this question properly, but I do have a decent example. I'm making a React app and I'm trying to make the url more "descriptive" I suppose.
So it starts off at Home, then I go to a Products page and the url changes from /home to /products. This part is fine.
When I want to go to a specific product from the product page, I want the url to change to /products/example instead of just /example. Do I have to specify this with the Links or is there some cleaner way to get it done?
Right now my only answer is to make the link go to /product/example and have the App.js route to the same url. I'm not sure how to properly ask this question for a Google search so I had to ask it here. If you have an idea how to specifically phrase what I'm asking, I'd appreciate that too.
Thanks in advance.
I believe the example in your URL /products/example is the product name for your product. If so, this can be done in putting the product name as an URL parameter using react-router or react-router-dom if you still have not.
by declaring the route as
import { Switch, Route } from "react-router-dom";
const Router = () => (
<Switch>
<Route exact path="/home" component={()=>return <h1>Home</h1>} />
<Route exact path="/products" component={()=>return <h1>Products</h1>} />
<Route path="/products/:productName" component={props=>return <h1>props.match.params.productName</h1>} />
</Switch>
);
export default Router;
more on that here
I have a filter system for my products in ReactJS which basically has the following:
http://localhost:3000/category/women/subcategory/tops/sorting/null/price/null/size/null/color/null/brands/null/merchants/null
The Route is as follows:
<Router>
<Route path="/category/:cat/subcategory/:subCat/sorting/:sorting/price/:price/size/:size/color/:color/brands/:brands/merchants/:merchants" component={Products} />
</Router>
The Problem is that I want to show filters in the URL in when they have a value other than null. Current my component works but I have to display every single filter in the URL with a null value by default, this is causing my URL to be extremely long. The only way I thought possible was to do a permutation combination of all the possible URLs in the filter and direct them all to { Products } which is extremely silly. There must be something in the Router component that I'm missing?
You need to use optional params in this case.
As and example if you want to accept both sorting/ascending/price and sorting/price you can write your path as follows assuming you use react router v4.
<Router>
<Route path="sorting/:sort?/price" component={Products} />
</Router>
You can read more about this here: React Router with optional path parameter
My routes are defined as follows:
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="experiments">
<IndexRoute component={Experiments} />
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
When I visit /experiments, things work as expected and the Experiments component is rendered. However, when I manually enter a URL with query parameters, example: /experiments?offset=50, the route doesn't match!
But when I navigate using <Link to={{ pathname='/experiments', query={offset:50} }} />, things work as expected. The Experiments component is rendered and this.props.location.query.offset is set to 50.
How do I get the Route to match when a URL with query string is entered manually (or copy-pasted)?
It seems route should match automatically url-with-query-string-not-matching-react-router-route, but it doesn't seem to be working for me.
Edit:
I narrowed down the problem to the catch-all route path="*". When I remove this route, everything works (e.g. when I visit /experiments?offset=50). But no routes are matched when the catch-all Route is present, even though it is at the bottom of the precedence list.
You need to make use of historyApiFallback with history={browserHistory} to load your route when you manually enter it.
what historyApiFallback does, is make it so your server returns index.html for whatever URL you try to access and since your routes are then configured with respect to index.html so you can access any of the route url directly
In you webpack add
devServer: {
historyApiFallback: true;
}
Ok, turns out this was an entirely unrelated issue. I was using redux-auth which was causing a redirect to the wrong URL pathname. This was happening after the react-router did its parsing and route matching. Once I fixed that, route matching worked perfectly. I was able to parse the query string from a URL like /experiments?offset=50 using the Route config in my question above.