Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HashRouter tips error in react router 4.x

Next to the Web Tips Picture

https://i.stack.imgur.com/A2OGn.png

Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

Tips error , This is when I click on the link again


Next to Picture is React-Router File Code...

https://i.stack.imgur.com/WgqqN.png

import { HashRouter, Route } from 'react-router-dom';

import { Provider } from  'react-redux';
import View from './containers';
import configureStore from './store/configureStore';

const store = configureStore();

const AppRouter = () => (
    <Provider store={store}>
        <HashRouter>
            <View.App.Container>
                <Route path='/' exact={true} component={View.App.Dashboard} />
                <Route path='/Todo' component={View.Todo.Container} />
                <Route path='/News' render={() => (
                    <View.News.Container>
                        <Route path='/News/List' render={() => (
                            <h2>News List Show</h2>
                            )} />
                    </View.News.Container>
                )} />
            </View.App.Container>
        </HashRouter>
    </Provider>
);

export default AppRouter;
like image 503
smithyj Avatar asked Mar 24 '17 07:03

smithyj


People also ask

What is HashRouter react dom router?

A <Router> that uses the hash portion of the URL (i.e. window. location. hash ) to keep your UI in sync with the URL.

What is the difference between HashRouter and BrowserRouter in react?

Both BrowserRouter and HashRouter components were introduced in React Router ver. 4 as subclasses of Router class. Simply, BrowserRouter syncs the UI with the current URL in your browser, This is done by the means of HTML-5 History API. On the other hand, HashRouter uses the Hash part of your URL to sync.

How do you use .push history in react?

push() Method. history. push() is another approach where we make use of the history props React Router provides while rendering a component. In other words, this works when the component is being rendered by React Router, bypassing the component as a Component prop to a Route.

Why we use BrowserRouter in react?

React Router is a standard library for routing in React. It enables navigation between views from different components in a React application, allows the browser URL to be changed, and keeps the UI in sync with the URL.


1 Answers

If you use the component Link for navigation, you may want to set the prop replace on it.

https://reacttraining.com/react-router/web/api/Link/replace-bool

like image 73
luffy Avatar answered Oct 05 '22 11:10

luffy