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

react-router root onChange to replace path infinite
React-router, how could i go back to two previous path, seems it will cause the Infinite loop,but react-router didn't support the pop function
Mysterious react-router error
Can I set a base route in react-router
Is it possible to set up a Servicenow page so all subroutes are handled by the root page?
React-Router and redirect not working any ideas?
Trying to change route using react-router-redux, not seeing change
React Router Performance Tunning in Cordova
Nested Routes and browserHistory
react-router root onChange hook replace url cause infinite loop
Merge new query params into react router's current location
react-router gives warning and then doesn't work
Basename not working properly
Failed propType: Invalid prop `component` supplied to `Route`
Specify redirect url for firebase google auth
React router, show 404 for non existent resource

Categories

HOME
google-chrome-extension
jdo
date
hive
activiti
mediawiki
fluentd
tinymce
hashmap
lodash
rsyslog
jpeg
umd
icloud
pivotal-cloud-foundry
virtualization
fancybox-3
export-to-csv
apache-cayenne
netflix
openrefine
pc
jsdoc
google-static-maps
aurigma
oxyplot
contextmenu
jprofiler
emulator
nas
orleans
arabic
qhull
fopen
elasticsearch-net
libuv
primitive
google-rich-snippets
directx-10
nameservers
siesta-swift
mapbox-gl
mpmediaquery
wpf-controls
host
simplexml
unobtrusive-validation
ansible-playbook
opshub
user-controls
ruby-on-rails-3.1
arena-simulation
reactive-cocoa-5
slick-3.0
galleria
flickr-api
termination
worksheet
python-webbrowser
ionicons
pebble-watch
fancybox-2
rdfs
vtigercrm
synchronous
cubes
angular-strap
bonobo
pcf
clang-static-analyzer
ios8-today-widget
cartesian-product
google-places
atk4
citrus-pay
ideamart
vstest.console.exe
processmodel
key-management
graph-api-explorer
clipperlib
bridge.net
device-orientation
system.reflection
tween
c3
tt-news
websocket4net
starcluster
kgdb
meteor-velocity
algebraic-data-types
typo3-neos
openlaszlo
html4
sharp-repository
jelly
e4x
gil
hosts-file
semantic-diff
asyncfileupload
transactionscope
php-parser
vdsp
table-footer
fluent-interface
subviews
sortable-tables
modelstate
backcolor
sector
procedural-music
private-members
.net-1.0

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