reactjs


Reactjs Router version4 Routing issue


I am using react-router version 4,as routing configuration for the component is done,but the component is not mounted as I tried with componentDidMount() method,the console log is not shown.
Here is my code,
import { Route,Switch,hashHistory } from 'react-router';
import {HashRouter as Router} from 'react-router-dom';
import { createHistory, useBeforeUnload } from 'history';
<Router history={hashHistory}>
<div>
<Route exact path='/userlogin/' component={LoginPage}></Route>
<Route exact path='/dashboard/' component={Dashboard}></Route>
<Route exact path='/forgotpassword/' component={ForgotPasswordPage}></Route>
</div>
</Router>
As the page is coming empty when i tried with router url path of component.
Any help is appreciated.Thanks in advance.!
My routes look like this:
var routes = (
<Router history={browserHistory}>
<Route path='/' component={Main}>
<IndexRoute component={Home} />
<Route path='chapters' component={ChapterListContainer} />
<Route path='chapters/chapter:id' component={ChapterPageContainer}></Route>
</Route>
</Router>
);
There are a couple of differences:
there is no <div> around the routes, they are encapsulated with a
path='/' to indicate the root component
I have an index route also which tells the router which component should be shown by default

Related Links

Code splitting using webpack for example https://github.com/erikras/react-redux-universal-hot-example
Reactjs calender picker
React with sort and filter
Reactjs not rendering to HTML in Ubuntu 14
Test text input with react and jest
How do I add an image to the DOM after another image has loaded?
why is this.state.records.amount undefined?
How to upload file on server with react, redux
Diagnostics feature in Angular 2 vs React
React- Elegantly Toggle State Visibility
React Single Page app with browserHistory possible?
Assign reducer to nested state property?
ReactJS rendering issue
How to setup a globally available react variable (also available in the browser console)?
Move the logic into new action
Understanding React Error Output

Categories

HOME
c#
youtube-api
oracle-sqldeveloper
salesforce
opencv4android
azure-database-mysql
google-docs-api
collision-detection
rtc
pyodbc
select2
jcodemodel
suitecrm
cakephp-2.0
exchange-transport-agents
google-closure-compiler
tag-cloud
internet-explorer-7
wallet
aiml
gpo
git-branch
formulas
include-path
mattermost
onclicklistener
core-animation
scalatest
knapsack-problem
units-of-measurement
intermec
ng2-bootstrap
imdb
visual-prolog
incapsula
headphones
minitest
azure-vm-scale-set
libconfig
linkurious
ninja-forms
compiled-query
aura-framework
datagridviewcombobox
paperclip
apiman
result
chrome-custom-tabs
weld
qtwebkit
stanford-nlp-server
boost-regex
androiddesignsupport
opticalflow
node.js-client
spring-cloud-aws
catalyst
scanf
qt3d
dbi
visual-web-developer
tinybox2
falcon
sprockets
nimbus
database-administration
bbedit
dcast
cascading
jcomponent
tvp
webservices-client
php-gd
dnvm
cyberduck
minko
connection-timeout
mathics
static-files
xcode5
dojox.grid
uiblureffect
kss
system.net
pytz
dotcmis
episerver-7
jsmpp
azure-caching
rssi
html5-filesystem
mixradio
lastinsertid
nsnumber
extensibility
junction-table
microsoft-speech-platform
doxia
flatten
optimistic-concurrency
pinchzoom
sipdroid
noise-reduction
javah
browser-state
projectgen
ffdshow

Resources

Encrypt Message