What is the use of "As" in react when importing components? - reactjs

I saw this line of code
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
and I couldn't help but wonder why BrowserRouter is imported "Router". Why not just use the name as it is. What is the advantage of using the above method?

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

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'

What is the difference between BrowserRouter(import from react-router-dom) and ConnectedRouter(import from connected-react-router/immutable)?

import { ConnectedRouter } from 'connected-react-router/immutable';
import { BrowserRouter as Router,} from 'react-router-dom';
i need to know difference between above both of them.
ConnectedRouter is to be used with Redux and can synchronize router state with a Redux store.
BrowserRouter is the 'standard' React router for the browser, to keep the UI in sync with the current URL.
The main difference in connected-react-router/immutable in is that history is stored in redux as immutable object so you can timetravel your history any time in the redux-life of the application.

'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'

React-router with createBrowserHistory for partial and full page reloads

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!!

Resources