This is what my react-router code looks like
render((
<Router history={browserHistory}>
<Route path={CORP} component={App}>
<IndexRoute component={Home} />
<Route path={"outreach"} component={OutReach}/>
<Route path={"careers/m"} component={Career}/>
<Route path={"members"} component={Members}/>
<Redirect from="*" to={"/home"} />
</Route>
</Router>
), document.getElementById('app'))
But when I go to my page, I get this error in my console
Uncaught ReferenceError: Redirect is not defined
How do I tell react-router to redirect the user to the /home only when the user's destination does not match any of the route paths mentioned above?
You just need to add
import { Redirect } from 'react-router';
In the top of your file
Related
I have a code like this :
<BrowserRouter>
<Switch>
<Route path="/" exact component={component1} />
<Route path="/somewhere/:something" component={component2} />
</Switch>
</BrowserRouter>
I tried this, because in the end, I want to match several paths with the same component / result :
<BrowserRouter>
<Switch>
<Route path={["/somewhere/:something","/somewhere2/:something"]} component={component2} />
</Switch>
</BrowserRouter>
and the path is matched, but my parameter (:something) isnt passed to it. Any idea why ? react-router's docs tells me :
Any valid URL path or array of paths that path-to-regexp#^1.7.0 understands.
The feature was only recently added to React-Router. You need to upgrade your react-router installation to be able to match the documentation and use the feature.
Im using react-router-redux#5.0.0
I have this
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
Is there a way to define default route as in react-router-redux#4.x.x?
It is also necessary this "default route" does not pass if any other matched.
Because if I will add
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />
Default component will be rendered for all routes, including '/login' and '/'
I was looking for answer for the same problem but for react-router-dom package. The solution was this:
<Switch>
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />
</Switch>
This way the first Route that matches will be displayed while the rest ignored.
You can import Switch together with Route like this:
import { BrowserRouter, Switch, Route } from 'react-router-dom';
Place the following catch-all route after all other routes are defined (optionally leave the path out as stated below):
<Route path="*" component={DefaultRoute} />
Here's a link to an answer with more details: React-Router: No Not Found Route?
With latest react-router version,
<Route path='' Componenet={Default}>
should be changed to,
<Route path='' element={<Default>}>
When a user clicks a link it will guide the user to a checkout page.
selectSlot(slot){
window.location = `/checkout/${slot.target.value}`
}
My approach won't keep the redux store values.
How can I keep those values?
Here are the router definitions
<Provider store={store}>
<ConnectedRouter history={history}>
<Router>
<Switch>
<Route exact path="/" component={MainLayout} />
<Route exact path="/index.html" component={MainLayout} />
<Route path="/checkout" component={CheckoutLayout} />
<Route component={NotFound}/>
</Switch>
</Router>
</ConnectedRouter>
</Provider>
I am using Link from react-router-dom for the purpose and works for me. You can read about it here
I have following route,
<Route exact path ='/' component={Posts} />
<Route exact path ='/:category' component={Posts} />
<Route exact path ='/new' component={NewPost} />
issue is when I go to /new route, Post component is getting rendered as well along with NewPost component. How to avoid that?.
I had to wrap route inside Component. It worked.
import { Route, Switch } from 'react-router-dom'
<Switch>
<Route exact path ='/' component={Posts} />
<Route exact path ='/:category' component={Posts} />
<Route exact path ='/new' component={NewPost} />
</Switch>
I'm building multilingual site where the language preference is part of the URL, e.g.
http://example.com/<somepage> (Russian, default)
http://example.com/en/<somepage> (English)
http://example.com/jp/<somepage> (Japanese)
http://example.com/../ (etc)
Everything is ok, when I use prefix for all languages:
<Route path="/:lang">
<Route path="somepage" component={Somepage}/>
</Route>
But for default language, I don't need to include language in url, as shown in example.
In fluxible router it can be solved by using regexp in path:
path: '/:lang([a-z]{2})?/<somepage>'
But it doesn't work in react router, because path must be a string, not a regexp.
Any ideas how to handle this use case?
Have you tried duplicating your routes? Seems to work for me thus far.
var innerRoutes = (
<Route>
<Route path="somepage" component={Somepage}/>
<Route path="otherpage" component={Otherpage}/>
</Route>
);
var routes = (
<Route path="/" component={App}>
{innerRoutes}
<Route path=":lang">
{innerRoutes}
</Route>
</Route>
);
your routes would need to look like:
<Router history={createBrowserHistory()}>
<Route component={App}>
<IndexRoute component={Home} />
<Route path=':lang/'>
<Route path='about' component={About} />
</Route>
<Redirect from='*' to='ru/about' />
</Route>
</Router>
The trailing slash in the :lang/ indicates that it will only be matched if the URL contains something after it (e.g. /de/about) otherwise there is a Redirect with a greedy matching which will always redirect to the page you specify in the to parameter. You can read more about Route Matching in the docs.
If you are using react-router v4 and react-intl you can use react-i18n-routing library