CODEWITHSUNDEEP
javascriptreactjs
Josh
Josh

Reputation: 1474

BrowserHistory not working for react-router

Currently my URL structure is still storing history in hash syntax.
Ex: http://localhost:3000/#/work?_k=otstr8

Im trying to have it use browserHistory from react-router to be displayed as:
http://localhost:3000/#/work

Here is my routes.js file:

//Import Dependencies.
import React from 'react';
import { Router, Route } from 'react-router'
import ReactDOM from 'react-dom';

//Import Components.
import AboutElement from '../views/about/about.jsx';
import WorkElement from '../views/work/work.jsx';
import ResumeElement from '../views/resume/resume.jsx';

//Set up routes.
let routes = (
    <Router>
        <Route path='/' component={AboutElement}/>
        <Route path='/work' component={WorkElement}/>
        <Route path='/resume' component={ResumeElement}/>
    </Router>
);

export default routes;

My index.js file:

//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';

//Import Routes.
import routes from './routes/routes.js';

ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'))

From what I have researched this syntax is correct for browserHistory? For some reason hash history is still being used. Any ideas why this is still happening?

Upvotes: 3

Views: 3613

Answers (2)

Michiel
Michiel

Reputation: 1051

Just install history as a seperate library and use this.

import { createHistory } from 'history'

const history = createHistory()

Upvotes: 1

Josh
Josh

Reputation: 1474

Just created my own variable for browserHistory.

//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

const browserHistory = createBrowserHistory();

//Import Routes.
import routes from './routes/routes.js';

ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'));

The syntax for the url is now:
localhost:3000/
localhost:3000/work
localhost:3000/resume

Which is great!

Upvotes: 0

Related Questions