CODEWITHSUNDEEP
reactjsreduxreact-router
JSnow
JSnow

Reputation: 1029

Redirecting with react-router in a react redux app

I am trying to implement routing for my app which is built with react and redux. I have wrapped in so that route handlers can get access to the store.But somehow my routing logic is not working.

This piece of code was working fine 

export default class Root extends Component {
  render() {
    return (
      <Provider store={this.props.store}>
        <div>
          <App /> 
        </div>
      </Provider>
    );
  }
}
But when I replace with the below code it is not showhing anything on my localhost.

export default class Root extends Component {
  render() {
    return (
      <Provider store={this.props.store}>
        <div>
        <Router>
        <Route path="/" component={App} />

        </Router>
        </div>
      </Provider>
    );
  }
}

I am trying to figure out what I am doing wrong. Any help will be appreciated.

Upvotes: 1

Views: 80

Answers (2)

Aaqib
Aaqib

Reputation: 10350

I am assuming your project is browser based project. So , you can make use of <BrowserRouter> if your website/app is hosted on a dynamic server. You can wrap it like : 

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

    export default class Root extends Component {
      render() {
        return (
          <Provider store={this.props.store}>
            <div>
            <BrowserRouter>
            <Route path="/" component={App} />    
            <BrowserRouter>
            </div>
          </Provider>
        );
      }
    }

if your web is backed by static server make use of <HashRouter>

You can read more Here

Upvotes: 3

Austin Greco
Austin Greco

Reputation: 33544

I think you're supposed to use one of the higher level router components like BrowserRouter. See if this works:

return (
  <Provider store={this.props.store}>
    <div>
      <BrowserRouter>
        <Route path="/" component={App} />
      </BrowserRouter>
    </div>
  </Provider>
);

Upvotes: 2

Related Questions