What is the equivalent of Router.create (react-router v0.13) in react-router v1.0?
var router = Router.create({
routes: routes,
location: null // Router.HistoryLocation
});
I want to create a reference for the router to be used outside of the DOM.
router.transitionTo('app');
The code snippet above is the ones in v0.13. Wondering if anyone knows how to write them in react-router v1.0.
I have gone through the documentation of react-router, and I had found the createRoutes function. I had no idea how to use it. Please help me on this.
React Router as of v1.0 is now more modular than that. Things like navigation are functions of a "history" object rather than the router itself, which only handles routing.
To do the equivalent with React Router v1.0, you would instantiate the history object outside the router, then do whatever you want with it. There's more detailed documentation available at the guide for navigating outside of components: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/NavigatingOutsideOfComponents.md.
In v1 Router is a component, the routes are children, and history is a prop:
import { createHistory } from 'history'
import { Router } from 'react-router'
<Router history={createHistory()}>{routes}</Router>
Edit: now I recommend you still install the history module, but import 'browserHistory' from react-router which provides a thin layer on top of it
In your top level component you can access props.history.pushState(state, pathname, query) (further down you'll have to pass it through or use the mixin with createClass or something):
this.props.history.pushState(null, 'contact');
You use a history object for this in v1.0.0 - if you don't pass Router one, it will create one for you.
See Getting Started for how to create a history object and Navigation for how to use it to perform navigation.
Related
Console throwing errors when I used React router
Have followed the router-dom v6 syntax still not able to render components
the console errors state that you did a default import for the Home, About, and Profile components, verify if you did a default or named export for those three components
This error appear when you have V6 of react-router-dom. V6 have many groundbreaking change so try to read official documentation check this out:https://reacttraining.com/blog/react-router-v6-pre/
Check this for more details
https://stackoverflow.com/a/70075248/11729240
I am using the react js router to navigate around. Now my question is how can I change the url in address bar from inside a component?
Suppose I have url as follows: https://websitename/loc/lib/12, and I have a dropdown list with some numbers which when selected, it should change the url above, ie: the number after the /lib/...<--.
What is the best way to modify it? Do I have to change it by pushing the change up the component till it reaches the page where the react router is declared? Or should I change it direclty in the page by using window.location.href?
Information:
React version: 17.0.1
React-router-dom: 4.3.1
Using React js classes (not react hooks).
See navigating in the documentation.
Get the navigate function from the useNavigate hook.
Since it is a hook you can get it directly in the component that renders the <select> element.
Then call it:
onChange={ event => navigate(`/loc/lib/${event.target.value}`) };
NB: This assumes React Router v6. It is a significant change over the equivalent functionality in old versions of React Router.
Before react router v6: You can use useHistory from the history package, which you probably already have in use, and use e.g. push from the history object to go to a new location.
I am using react and react-router do we have any replacement of window.location.assign or any other window method for redirection in react or react-router? I want to redirect to some other website. Not on the same react website from which I am redirecting.
I found this answer How to emulate window.location with react-router and ES6 classes but it is redirecting to some other page in the react application only so, this is not sufficient for me.
I am using react-router v4+
I think you want to redirect third party URLs
location.assign(<Your URL>);
example:
location.assign("https://google.com")
Have you tried using the history package, after installing history package,
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
history.push('www.abc.com');
history.go(0);
Both have Route, Link, etc. When to use one or the other? I'm really confused on where to use each one. Server side? Client side?
https://reacttraining.com/react-router/
In some examples you need to pass the history, in others not. What to do?
<Router history={browserHistory}>
vs
<Router>
It's really confusing on when to use one or the other, any help appreciated.
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. As far as when you use
<Router history={browserHistory}>
vs
<Router>
In RRv4 you won't need to pass down browserHistory, that was just for previous versions of the router.
If you're still confused, you can check out the details on each package here
react-router-dom is a react-router plus:
<BrowserRouter> which is
<Router history={browserNativeHistoryApiWrapper}/>
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js
some Link improvements for browser
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
and with <NavLink> — wrapper that knows if it's "active" or not
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Just use react-router-dom - react-router-dom re-exports all of react-router. The link on GitHub answer (what's the diff between react-router-dom & react-router?).
In v4, react-router exports the core components and functions.
react-router-dom exports DOM-aware components, like <Link> ( which
renders <a>) and (which interacts with the browser's
window.history ).
react-router-dom re-exports all of react-router's exports, so you
only need to import from react-router-dom in your project.
(Source: GitHub)
Found this in the Github.
Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.
Source: https://github.com/remix-run/react-router/tree/main/packages/react-router
I have noticed that some of the places in articles they have used React.render() and some of the places ReactDOM.render(). Is there any specific difference between these two?
This is a very recent change introduced with 0.14. They split up React into a core library and the DOM adapter. Rendering is now done via ReactDOM.render.
https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
React.render has been deprecated as of React 0.14. With packages like react-native, react-art, react-canvas, and react-three, it is clear that the beauty and essence of React has nothing to do with browsers or the DOM.
To make this more clear and to make it easier to build more environments that React can render to, the main react package has been split into two: react and react-dom.
This paves the way to writing components that can be shared between the web version of React and React Native.
The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. Think of these as the isomorphic or universal helpers that you need to build components.
The react-dom package has ReactDOM.render, .unmountComponentAtNode, and .findDOMNode.
React.render has been deprecated since React 0.14. React diverged into two separate libraries. The core library knows how to work with React components, nest them together and so on, but to take the component and render it to the DOM is a separate library called ReactDOM. So to render a component, you don't use React you use ReactDOM.
import React from 'react';
import ReactDOM from 'react-dom';
Then you would apply it like so:
ReactDOM.render(App);
If you try to run it like that, back then you would probably have gotten an error that says:
Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.
If you get that error, it's a bit cryptic, think of the following function below is creating an instance of a component to the DOM:
const App = function() {
return <div>Howdy!</div>;
}
I passed App as a class to ReactDOM.render() and not an instance of the component. So it's saying please ensure you make an instance of the component and then pass it, or we need to instantiate it and then pass it to the DOM.
So you would fix it by passing an instance like so:
ReactDOM.render(<App />);
So that would create an instance of App and pass it to ReactDOM.render() but you would not be quite there yet as you would probably have gotten the following error message:
Target container is not a DOM element.
So React is saying I am trying to render this but I don't know where to render it to because ReactDOM takes a second argument which is a reference to an existing DOM node on the page. When you render this <App /> component, insert that HTML into this element that already exists in our HTML document. You would go to your index.html file and find the div with class="container" or whatever it is and that is the root node. All we have to do is pass a reference to that container like so:
ReactDOM.render(<App />, document.querySelector('.container'));
Then you will get the component rendering to the screen. And lastly, five years ago we got ES6 syntax so that App component from above could be rewritten like so:
const App = () => {
return <div>Howdy!</div>;
}
So using a fat arrow like that is identical to using the function keyword.