react-router


React Router 4: either-or routes


I have a case where I want to set up an url-scheme on the form
/items/ <- list of items
/items/1 <- item1
/items/2 <- item2
...
/items/2 <- itemn
/items/new <- create item
From my expirience with other routing frameworks, I've tried this:
function (props) {
var match = props.match;
return (
<div>
<Route path={ `${match.url}/new` }
component={ Create } />
<Route path={ `${match.url}/:id` }
component={ Details } />
<Route exact
path={ match.url }
component={ List } />
</div>
);
}
However, when i navigate to /items/new, both the Create-component and the Detail Component renders.
My workaround is to wrap the Details-component like this:
function DetailContainer (props) {
if (props.match.params.id === 'new') {
return null;
}
return (
<Detail {...props} />
);
}
But this seems a bit hackish to me. Is it possible to set up this kind of behaviour using only routes? I know this is how stuff is done in Flask, but from what I gather from the rr4 documentation the concept of routes here is a bit different (meaning that several routes can render at once).
The path-part of the router seems to be based on this module: https://www.npmjs.com/package/path-to-regexp
Since it looks like you can use regex-expressions inside the path part could you not use
path={ `${match.url}/(:id?!new)` }
or something.. (My regex fu is not awesome at this point)
On Twitter I was pointed in the direction of https://reacttraining.com/react-router/web/example/ambiguous-matches
Switch was what I was looking for:
function (props) {
var match = props.match;
return (
<div>
<Switch>
<Route path={ `${match.url}/new` }
component={ Create } />
<Route path={ `${match.url}/:id` }
component={ Details } />
</Switch>
<Route exact
path={ match.url }
component={ List } />
</div>
);
}

Related Links

Component not rendered when calling “replace” in onEnter
React-Router - componentDidMount not called when navigating to URL
React-Router-Redux hydrate store based on route path
How to remove react-router 2.0 warning about props.history?
React-route 1.0 equivalent of 0.13's Router.create
Server-side rendering with react-router is not working
What is the react-router 1.0 equivalent of 0.13's “getCurrentRoutes”?
Server side data fetching
the <Router> is rendered only once, how can i get the location.pathname when it's changed?
Favicon requested on every route change
Get params outside of a component
Is there a way using React Router to set an active class on the wrapper to the Link?
Passing state via this.history.pushState()
react-router - run nested onEnter functions simultaneously
React Router: relative path to css and js files is incorrect when browser's url is changed
React Router, this.props.children == null when refreshing page

Categories

HOME
multithreading
coq
magnific-popup
gremlin
json.net
vmware
graphql
rubygems
twitter-bootstrap-4
google-project-tango
indesign
azure-storage-tables
dacpac
spring-kafka
google-cloud-ml
size
iron-router
try-catch
vaadin7
pythonanywhere
dbext
swingx
ehcache
facebook-instant-articles
pass-by-reference
ejabberd-module
saas
stormpath
junit5
binary-data
exuberant-ctags
karaf
code-contracts
caret
accelerate-framework
android-ble
stacked
retina-display
android-fingerprint-api
firebase-admin
nomethoderror
turbogears
jsch
outlook-2013
youcompleteme
termination
worksheet
clean-architecture
powercli
lowpass-filter
kbuild
r-forge
spring-mongodb
minimization
or-tools
objective-c-swift-bridge
setuptools
libpng
ctest
mathematica-frontend
etsy
blackberry-10
bluegiga
nessus
libressl
android-listview
method-parameters
dundas
system.reflection
codeigniter-url
openexr
hyprlinkr
resty-gwt
oracle-warehouse-builder
ember-charts
srs
prettify
c18
ms-project-server-2010
listings
odata4j
eventual-consistency
mylyn
django-nonrel
mqx
e4x
typoscript2
datawindow
pydot
joyent
yui-datatable
winbugs14
mongomapper
site.master
sudzc
h.323
dbal
ext3
webkit.net
libs
simpletest
sector
mdac

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App