Mortezaipo Mortezaipo - 1 month ago 7
React JSX Question

Reactjs Route Doesn't Return Correct Result

I have 3 apps with this structure:

import React from 'react'
export default React.createClass({
render() {
return <div>Hey App1!</div>
}
})

import React from 'react'
export default React.createClass({
render() {
return <div>Hey App2!</div>
}
})

import React from 'react'
export default React.createClass({
render() {
return <div>Hey App3!</div>
}
})


And in my
main.js
:

import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, browserHistory, IndexRoute } from 'react-router'
import App1 from './modules/App1.js'
import App2 from './modules/App2.js'
import App3 from './modules/App3.js'

ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App1}>
<IndexRoute component={App1} />
<Route path="app1" component={App2} />
<Route path="app2" component={App3} />
</Route>
</Router>
), document.getElementById('app'))


But when I try
/#/app1
or
/#/app2
addresses in my browser it shows the
/
result (it means 'Hey App1").

My Reactjs version is:
15.3.2

Answer

your preferred history is browserHistory. Then the URLs should look like example.com/some/path.

So try /app1 or /app2 without hash in the url.

Hash history uses the hash (#) portion of the URL, creating routes that look like example.com/#/some/path.

If you want to use hash in the url pass hashHistory as props instead of browserHistory