Initially I tried to have 1.x Version when I do this and I can’t do it so I decided to upgrade react-router to 2.x.
After installing react-router 2.x, the application works because it still uses hashHistory but when I use When browserHistory replaces it:
>It shows a gray screen
>The HTML of the application only has the tags in
> React Developer Tools showed me that there is a null inside the router
>I also checked the “Network” tab, all files have been downloaded correctly, and the content is correct
> Surprisingly, in the JavaScript console No printing, no errors/no changes (I am really shocked by this, but I am new to React and I want to know what to do in this case).
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((
-
+
{Routes}
), document.getElementById('smartadmin-root'));`
The backend uses Phoenix Framework.
Later edit:
Here is the hashHistory version
https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master
Here is the historical version of the browser:
https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master
The reaction code of the two can be found in the src directory.< /p>
To run the application, you need to install Elixir, Phoenix and Postgresql to get back-end dependencies (run $mix deps.get), get front-end dependencies (npm install and bower install), to change config Database username and password.exs in /dev, create and migrate database hybrid ecto.create&&mix ecto.migrate, and finally run mix phoenix.server.
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((
{Routes}
), document.getElementById('smartadmin-root')) ;
I have a bootstrap react theme using react-router 1.x and hashHistory, I want to remove the hash, so follow this advice.
Initially I tried I did this when I had the 1.x version and I couldn’t do it so I decided to upgrade react-router to 2.x.
After installing react-router 2.x, the application worked because it still uses hashHistory but when I replace it with browserHistory:
>It shows a gray screen
>The HTML of the app only has
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((
-
+
{Routes}
), document.getElementById('smartadmin-root'));`
Use Phoenix Framework.
Edit later:
Here is the hashHistory version
https://gitlab.com/blockbuster/react-router-2-with-hash-working/ tree/master
Here is the browser history version:
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 the backend dependencies (run $ mix deps.get), get the front-end dependencies (npm install and bower install) to change the database username and password in config/dev. exs, create and migrate the database hybrid ecto.create && hybrid ecto.migrate, and finally run mix phoenix. server.
Have you tried this method in 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((
{Routes}
), document.getElementById('smartadmin-root')) ;