For some reason my routing in react doesn't work using react-router

Question

I have tried implementing react-router routing library to my react application... here is my main component code. When i have just the '<Route path="/" component={App} />' without '<Route path="/admin" component={Admin} />' The App component gets rendered but when I have both, nothing gets rendered. was wondering if i was doing something wrong.

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

import LandingPage from './landingpage';
import Admin from './admin';

injectTapEventPlugin();

class App extends React.Component{
  render(){
    return (
      <MuiThemeProvider>
        <LandingPage />
      </MuiThemeProvider>
    );
  }
}

ReactDOM.render(
  <Router>
    <Route path="/" component={App} />
    <Route path="/admin" component={Admin} />
  </Router>,
  document.getElementById('spot')
);

heres my admin component

import React from 'react';

class Admin extends React.Component {
  render(){
    return (
      <div>Holla</div>
    );
  }
}

export default Admin;

and my webpack configuration

module.exports = {
  entry: [
    './src/app.js'
  ],
  output: {
    path: __dirname,
    filename: "bundle.js",
    publicPath: '/'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      test: /\.jsx?$/,
      loader: 'babel'
    }]
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true,
  }
};

Have you tried adding Switch to render your routes exclusively? reacttraining.com/react-router/web/api/Switch You may also need to add the exact attribute to your home path, like this: <Router> <Route exact path="/" component={App} /> <Route path="/admin" component={Admin} /> </Router> — eulloa
– eulloa, Commented Aug 5, 2017 at 19:56

Alex Borodin · Accepted Answer · 2017-08-05 19:59:09Z

2

React-Router 4 accepts only one child. Try:

   <Router>
    <Switch>
      <Route path="/" component={App} />
      <Route path="/admin" component={Admin} />
    </Switch>
  </Router>,

or

   <Router>
    <div>
      <Route path="/" component={App} />
      <Route path="/admin" component={Admin} />
    </div>
  </Router>,

answered Aug 5, 2017 at 19:59

Alex Borodin

2,0341 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rimraf Over a year ago

don't forget to import switch from react-router-dom! but alex is right.

rimraf · Accepted Answer · 2017-08-05 20:01:44Z

0

I think your problem is with the MUI theme provider not being available for your admin component and that the router only accepts one child. Try placing your muithemeprovider here instead:

ReactDOM.render(

  <Router>
  <MuiThemeProvider>
    <Route path="/" component={App} />
    <Route path="/admin" component={Admin} />
  </MuiThemeProvider>      
  </Router>,
  document.getElementById('spot')
);

So that it's available for all your components and not just App

answered Aug 5, 2017 at 20:01

rimraf

4,1577 gold badges33 silver badges56 bronze badges

Collectives™ on Stack Overflow

For some reason my routing in react doesn't work using react-router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related