I am trying to use react-router v1.0.0 for full page and partial reloadable urls.
I have the following "History.jsx" file,
import BrowserHistory from 'history/lib/createBrowserHistory';
export default new BrowserHistory();
and I import it in my main entry file "app.jsx" like following,
import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import Routes from './../utils/Routes.jsx';
import history from './../utils/History.jsx';
ReactDOM.render(
(<Router history={history}>{Routes}</Router>),
document.getElementById('pageSpecific')
);
Now when i navigate to "localhost:8080", it shows the page good. When i click on a href in the page, it takes to "localhost:8080/example" correctly without the "#" in the URL and it does not reload the page. Its all good.
Now that my URL is "localhost:8080/example" and when i try to refresh the page, it says "cannot get /example". This is problem which i am not able to solve!
Am i doing anything wrong? I am really struck in this place!!
Related
I am trying to figure render a complete seperate admin path with its own routes.
Is it possible to render say admin page that is with and existing project.
At the moment I have the following code it is working very well.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './client/App.js';
import Admin from './admin/admin.js';
var pathname = window.location.pathname;
if (pathname.substring(0, 6) == '/admin') {
ReactDOM.render(<Admin />, document.getElementById('root'));
} else {
ReactDOM.render(<App />, document.getElementById('root'));
}
I'm struggling to understand what you want to do exactly. You already have everything you need, Admin and App are components and therefore small projects I would say. However, you shouldn't do it that way and instead use react-router it avoids you to check the window location pathname by yourself and will save you a lof of time and headache.
I am trying to import Dashboard from LoginPage component.
I tried
import Dashboard from './scenes/Dashboard
import Dashboard from './Dashboard
import Dashboard from '../../Dashboard
but they all didn't work.
What is the correct way to import it?
If the component name is 'DashboardComponent' exported using export default, you can import by,
import DashboardComponent from '../Dashboard/DashboardComponent'
if it is not default export, it can be imported using {} as,
import {DashboardComponent} from '../Dashboard/DashboardComponent'
I'm using react-router version 5.5.1 and am trying to use it in my index.js file:
./src/index.js
14:8-21 'react-router' does not contain an export named 'BrowserRouter'
The import statement within my index.js:
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';
you need to import BrowserRouter from react-router-dom
import { BrowserRouter } from 'react-router-dom'
more info about BrowserRouter
BrowserRouter is a part of react-router-dom so you've to import it from react-router-dom.
import { BrowserRouter } from 'react-router-dom'
Match and Miss were components in alpha release of react-router. Match has been changed to Route and Miss has been removed. You can use Switch instead of Miss
Refer to this question about Match and Miss
BrowserRouter is in react-router-dom as others have stated. V4 is very different from v3. I recommend looking at their guide to see how to use it. And any examples you look for should be for version 4.
https://reacttraining.com/react-router/web
import { BrowserRouter as Router, Route } from 'react-router-dom'
Issue:
'Route' is not exported from 'react-router-dom' (imported as 'Router').
Solution:
Just close the localhost and Re-run the npm start, its works fine
So I had same issue with Link from react-router-dom. I resolved it by installing same version of react-route and react-router-dom. Looks like react-router-dom doesn't have Link in it.
yarn add react-router react-router-dom
There was an error in your import. BrowserRouter is a part of react-router-dom. so you've to import it from react-router-dom.
import { BrowserRouter } from 'react-router-dom'
When I use custom hash history in my app, the confirm navigation mechanism does not work. I have modified the react-router confirm-navigation example to use custom hash history and successfully reproduced the problem.
I set the router leave hook (router.setRouteLeaveHook) and in the hook I return a string to indicate I do not want to leave the route.
When I push the BACK browser button, the browser URL will change to wherever the BACK button history navigates to, and reactRouter will correctly display a confirmation dialog box. On this dialog box I push the "cancel" button to indicate I don't want to leave the route, and my component remains visible and the route does not change. The problem is that the browser URL does not change back to where it was originally before I pressed the BACK button.
Is anyone else seeing this?
This is what I changed in examples/confirm-navigation/app.js to reproduce the problem.
import React from 'react'
import { render } from 'react-dom'
import { createHashHistory } from 'history'
import { browserHistory, Router, Route, Link, useRouterHistory, withRouter } from 'react-router'
let myCustomHashAppHistory = useRouterHistory(createHashHistory)({ queryKey: false })
and then in the app render I pass my myCustomHashAppHistory:
render((
<Router history={myCustomHashAppHistory}>
...
...
I have a bootstrap+react theme that was using react-router 1.x and hashHistory and I wanted to remove the hash so followed this advice.
Initially I tried to do this while having the 1.x version and I was unable to do it so I've decided to upgrade react-router to 2.x.
After installing react-router 2.x the app worked because it was still using hashHistory but when I replaced it with browserHistory:
it showed a grey screen
the HTML of the app had only the <noscript data-reactid=".0"></noscript> tag inside it
the React Developer Tools showed me that the router had a null inside it
I also checked the Network tab and all files were downloaded properly, and had the right content
surprisingly the was nothing printed in the JavaScript Console, no error/no warnging (I'm really shocked about this, but I'm new React, I would like to know what to do in situations like this).
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.
Later Edit:
Here you have the hashHistory version that works
https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master
And here is the browserHistory version that doesn't:
https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master
The react code for both can be found under the src directory.
To run the app you need to have Elixir, Phoenix and Postgresql installed, to get backend dependencies( run $ mix deps.get), get frontend dependecies( npm install and bower install), to change the database username and password in config/dev.exs, to create and migrate the database mix ecto.create && mix ecto.migrate and finally run mix phoenix.server.
Have you tried it this way 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'));
Since there is no solution yet, find my (minimalistic) router version below, that is working for me.
Dependencies:
react#15.1.0
react-dom#15.1.0
react-router#2.4.0
History.js is not needed explicitly, since it is a dependency of react-router.
Webpack
Make sure to add
devServer: {
historyApiFallback: true
}
to your webpack.config.js, since webpack-dev-server might have some issues routing correctly (mostly in terms of backwards 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 encourage you to try this code and leave out your hotloading stuff.
Let me know if it helps and if there are any questions. I'm glad to edit my post as needed.