What is the use of scroll behavior mentioned in react-router? - reactjs

I was trying to upgrade to latest react-router. While reading the upgrade guide I found this "Using Scroll Behavior" and Below code snippet
import { Router, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory';
import useScroll from 'scroll-behavior/lib/useStandardScroll';
const appHistory = useScroll(useRouterHistory(createBrowserHistory))();
<Router history={appHistory}/>
What is the use of scroll behaviour in react-router? I didn't see its much reference in docs. Any hint will be helpful.

Related

Error importing Switch when using create-react app

I really do not know how to resolve this issue. I need help...
the Error states; "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possib:
I can't create a link tag in react due to this error. I do need help with this...
the error is cleared anytime I remove the switch tag but the link doesn't still work.
In react-router-dom v6, Switch is replaced by Routes.
You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
react-router-v6

createBrowserHistory is undefined in history import for React Router DOM

I'm currently using v5 of React Router DOM. My goal is to create a history object so that I can manipulate my page locations in my redux actions. In past projects I imported the createBrowserHistory function as so:
import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory();
With this setup though I get the deprecation warning:
Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`. Support for the latter will be removed in the next major release.
I changed my import to just:
import createBrowserHistory from 'history';
But at this point createBrowserHistory comes up as undefined. I'm at a loss at this point. Any help would be greatly appreciated. Below is what my yarn.lock file looks like:
react-router-dom#^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
dependencies:
"#babel/runtime" "^7.1.2"
history "^4.9.0"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-router "5.1.2"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
try
import history from 'history';
var createBrowserHistory = history.createBrowserHistory
or
import { createBrowserHistory } from 'history';

Whe I use the react route 4 history, but the console gives the follow warning. Can anyone tell me the reason?

warnning: ignores the history prop. To use a custom history, use import { Router} instead of import {HashRouter as Router}
The warning clearly explains what is wrong in your code. HashRouter and BrowserRouter have their own predefined history and hence they do not take history passed explicitly. In order to use custom history you can use Router from react-router-dom
import { Router, Route} from 'react-router-dom';
Also if you are using createBrowserHistory and not using anywhere else except to pass it to the Router, you may as well use BrowserRouter like
import { BrowserRouter as Router, Route} from 'react-router-dom';
Try using this
import { Router, Route } from 'react-router-dom'

'react-router' does not contain an export named 'BrowserRouter'

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'

Upgrading React-Router and replacing hashHistory with browserHistory

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.

Resources