So I'm trying to use history in React, but it seems to be moved around a lot. I found this:
https://github.com/ReactTraining/react-router/blob/ab4552d2ea0ec5c0cf3c534bca654a1af3ea0dec/docs/guides/NavigatingOutsideOfComponents.md
but it just says that 'react-router' does not contain an export named 'browserHistory'. How can I solve it? Where can I find history? All answers I found were around 1.5 years old.
You're looking for the BrowserRouter.
import { BrowserRouter } from 'react-router';
browserHistory is something that existed in v2/v3 but was rewritten into BrowserRouter in v4.
There is a migration guide here that should help you.
history Api has been moved to a separate history package
In order to create browserHistory, you install history like
npm install -S history
and write
import createHistory from "history/createBrowserHistory"
const browserHistory = createHistory()
export { browserHistory };
However in react-router-v4 an equivalent of Router with browserHistory is BrowserRouter
You no longer have browserHistory apparently. So you can do this instead,
<Route>
<Header />
</Route>
and you can do
function Header(props) {
// props.history and props.location are available now inside this component
}
and then you can do props.history.push or whatever if that is what you want to do.
The link you have is for the older version of react-router so check out react-router 4
Related
When trying to import useNavigate from react-router-dom, I get the following error:
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
My Import statement:
import { useNavigate } from 'react-router-dom';
You are trying to use the latest features of react-router.
Please make sure that you installed the react-router-dom#6.0.0-alpha.2 .
It is React Router v6 which gives you a useNavigate hook
Please refer here for further reading from the React Router team
Two quick ways to check the version:
Verify from the package.json file
Run npm list --depth=0 to view the various packages in your project
If you're using react router v5 you can use useHistory.
import { useHistory } from "react-router-dom";
use:
history.push('/your-component')
I faced issue as like this: "useNavigate is not exported from 'react-router-dom"
My solution - I uninstalled the react-router-dom and I have reinstalled it... now this issue is resolved for me..
I have gone through several similar questions but could not find something that worked. I am trying to bring in BrowserRouter from react-router but it says:
Module '"../node_modules/#types/react-router"' has no exported member 'BrowserRouter'
as per another similar question on here, I did an npm install of #types/react and #types/react-router but saved as dev dependencies. they were already in my package.json but as regular dependencies. before this, they were giving a similar issue when doing import React from 'react'. It would say that those modules could not be found, same for router. then when i did the install, those errors went away but the BrowserRouter started showing this error. I did also try 'react-router-dom'.
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router';
import './App.css';
import Recipes from './components/Recipes';
const App: React.SFC = () => {
return (
<BrowserRouter>
<main>
<Switch>
<Route exact path='/' component={Recipes} />
</Switch>
</main>
</BrowserRouter>
);
}
export default App;
Just expecting for the error to not be present and to be able to regularly navigate. This is my first time really using typescript.
According to the documentation of React Router, BrowserRouter gets imported from 'react-router-dom', not 'react-router'.
Here is the example code given in the link above.
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App/>
</BrowserRouter>
Here is a SO question about the difference between react-router and react-router-dom and the accepted answer contains the following.
react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router.
I did also try 'react-router-dom'.
It should work, e.g. this code
import { BrowserRouter, Route, Switch } from "react-router-dom";
works.
Both react-dom and react-router-dom packages should be installed. That means both can be found in the dependencies section of package.json file. Working sample project using Typescript can be found here.
I have a very basic react app I'm creating using create-react-app currently, and this is the code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App/AppComponent';
const browserHistory = createBrowserHistory();
ReactDOM.render(
<Router path="/" history={browserHistory}>
<div>
<Route path="/" component={App} />
</div>
</Router>, document.getElementById('root')
);
AppComponent.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>This is the App component</div>
);
}
}
export default App;
And I get the following warning in the console when I run this app:
bundle.js:11888 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
When I remove the react-router related stuff, I don't seem to get the console warning so my guess is it's coming from that package... but I've used it in another small app previously and didn't have the error so I'm a bit confused.
What am I missing here?
This is a recent change (2 days ago) that React made in React v15.5. The change was that PropTypes are no longer included in React itself and instead are there own package (prop-types). This means that any library that is using React.PropTypes, which are most of them, are now showing this warning. An issue has already been filed with React Router specifically and a few pull requests have also been submitted. I imagine this will be fixed within the next 24-48 hours. So for now, just ignore it. There's nothing actually wrong with your code.
About four days ago, I created a project with react-router. I installed everything as normal, following this guide. I then installed react-router via the recommended method in the official Github readme. For some odd reason, it wouldn't render any of my components until I moved the route to my index.js file in my root directory, where it began to work. Before, the route was located inside of my app.jsx file.
Today, I decided that I wanted to create a small portfolio site for myself, since I feel like I'm understanding the basics of React. I installed everything like I did before, w/ versions 3.0.0 and 15.3.2 of react-router and react / react-dom respectively. The versions have not changed since my last project a few days back. However, it seems like react-router is no longer working for some reason, showing no errors in my console, and I've spent hours now searching Google and Stack Overflow for solutions. My code is super bare-bones currently, with my index.js file looking like the following, without the use of react-router:
import React from 'react'
import {render} from 'react-dom'
class App extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
const Home = () =>
<p>Hello</p>;
render(
<App><Home /></App>,
document.getElementById('main'))
I understand that I should be moving towards more functional programming, but for the time being I have App written as a class, for testing reasons. Now, why would the above code work correctly, but the code snippet below will not produce any results?
import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
class App extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
const Home = () =>
<p>Hello</p>;
render(
(<Router history="hashHistory">
<Route path="/" component={App}>
<IndexRoute component={Home} />
</Route>
</Router>),
document.getElementById('main'))
I really do not think I'm misunderstanding react-router in any way. I've tried wrapping the route in (), as I've seen in some tutorials, but that didn't make a difference -- obviously.
Is there something wrong with my code? or could it be something else? If there is any more information I can provide for you guys, let me know. I can take some screen shots or something, if that would help any of you out.
I think you should change
<Router history="hashHistory">
to
<Router history={hashHistory}>
Router is expecting history to be an objetct, not string:
var Router = _react2.default.createClass({
displayName: 'Router',
propTypes: {
history: object
(...)
});
I am using react router for my single page application routing. I got multiple components which will change based on user events like click.
Now the problem is, for the IndexRoute my routing works fine, but for the subsequent route it breaks. As per my analysis react-router perfectly renders the second component but ReactDOM.render method adds '#' to url after successful rendering. It confuses react-router and makes it to render the default route.
Can anyone help me to resolve this issue?
NOTE: I am wondering why ReactDOM.render adds empty '#' to url
It is likely that you have not enabled the 'browserHistory' feature provided by React-Router (last I checked, it defaulted to 'hashHistory').
Try adding this to the main (clientside entrypoint to your React app) file:
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
/* The rest of your other code... */
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
)
And see if you still get that issue.