Updating React-Router and replacing hashHistory with browserHistory

Question

I have a boottrap + download theme that used response-router 1.x and hashHistory, and I wanted to remove the hash, followed by. I initially tried to do this with version 1.x, and I was not able to do this, so I decided to upgrade the react router to 2.x. After installing response-router 2.x, the application worked because it still used hashHistory, but when I replaced it with browserHistory:

• he showed a gray screen
• The application HTML code contained only the <noscript data-reactid=".0"></noscript>
• React Developer Tools demonstrated to me that the router has null inside it
• I also checked the "Network" tab, and all the files were downloaded correctly and had the correct content

• surprisingly, nothing was printed in the JavaScript console, without errors / without warning (I'm really shocked by this, but I'm new React, I would like to know what to do in such situations). Here are my changes to Router.jsx :

    import React from 'react' import {render} from 'react-dom' -import {Router} from 'react-router' +// import {Router} from 'react-router' +import { Router, Route, Link, browserHistory } from 'react-router' +// import { useRouterHistory } from 'react-router' +// import { createHashHistory } from 'history' +// import { createBrowserHistory } from 'history'` import History from '../components/layout/navigation/classes/History.js'; import Routes from './Routes.jsx'; +// const appHistory = useRouterHistory(createHashHistory)({ queryKey: false }) + var rootInstance = render(( - <Router history={History}> + <Router history={browserHistory}> {Routes} </Router> ), document.getElementById('smartadmin-root'));` 

The backend uses the Phoenix Framework .

Edit later : Here you are using a hashHistory version that works

https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master

And here is the version of browserHistory that does not:

https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master

The reaction code for both can be found in the src directory.

To run the application you need to install Elixir , Phoenix and Postgresql to get backend dependencies (run $ mix deps.get ), get the frontend dependecies functions ( npm install and bower install ) to change the database username and password in config/dev.exs to create and migrate the mix ecto.create && mix ecto.migrate and finally run mix phoenix.server .

Answer 1

Have you tried this in your Router.jsx?

 import React from 'react' import {render} from 'react-dom' import { Router, Route, Link, browserHistory, useRouterHistory } from 'react-router' import createBrowserHistory from 'history/lib/createBrowserHistory' import History from '../components/layout/navigation/classes/History.js'; import Routes from './Routes.jsx'; const appHistory = useRouterHistory(createBrowserHistory)({ queryKey: false }) var rootInstance = render(( <Router history={appHistory}> {Routes} </Router> ), document.getElementById('smartadmin-root')); 

Answer 2

Since there is no solution yet, find my (minimal) version of the router below, which works for me.

Dependencies:

• react@15.1.0
• react-dom@15.1.0
• react-router@2.4.0

History.js is not required explicitly, as it is a reaction-router dependency.

Webpack don't forget to add

 devServer: { historyApiFallback: true } 

to your webpack.config.js, since the webpack-dev server may have the correct routing routes (mainly from the point of view of reverse navigation).

 import React from 'react'; import {render} from 'react-dom'; import {Router, Route, IndexRoute, browserHistory} from 'react-router'; import {Routes} from './Routes'; // your routes file render( <Router history={browserHistory}> {Routes} </Router>, document.querySelector('#smartadmin-root') ); 

I would advise you to try this code and leave your material for hot download. Let me know if this helps, and if there are any questions. I am happy to change my post as necessary.