Я попытался реализовать библиотеку маршрутизации с реагирующим маршрутизатором в свое приложение для реагирования ... вот мой основной код компонента. Когда у меня есть только '<Route path="/" component={App} />' без '<Route path="/admin" component={Admin} />', компонент приложения отображается, но когда у меня есть и то, и другое, ничего не отображается. было интересно, если я делаю что-то не так.

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

Вот мой административный компонент

import React from 'react';

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

export default Admin;

И моя конфигурация веб-пакета

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,
  }
};
0
Priince Abalogu 5 Авг 2017 в 22:49
1
Вы пробовали добавить Switch для эксклюзивного рендеринга ваших маршрутов? reacttraining.com/react-router/web/api/Switch Вы также можете необходимо добавить точный атрибут к вашему домашнему пути, например:
 – 
eulloa
5 Авг 2017 в 22:56
Спасибо .. точный ответ был более тонким
 – 
Priince Abalogu
5 Авг 2017 в 23:01

2 ответа

React-Router 4 принимает только одного ребенка. Пытаться:

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

Или

   <Router>
    <div>
      <Route path="/" component={App} />
      <Route path="/admin" component={Admin} />
    </div>
  </Router>,
2
Alex Borodin 5 Авг 2017 в 22:59
Не забудьте импортировать коммутатор из response-router-dom! но Алексей прав.
 – 
archae0pteryx
5 Авг 2017 в 23:03

Я думаю, ваша проблема в том, что поставщик тем MUI недоступен для вашего административного компонента и что маршрутизатор принимает только одного ребенка. Попробуйте разместить здесь свой muithemeprovider:

ReactDOM.render(

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

Чтобы он был доступен для всех ваших компонентов, а не только для приложения

0
archae0pteryx 5 Авг 2017 в 23:01