由於某種原因，我的路由反應不起作用使用react-router

我已經嘗試實施反應路由器路由庫我的反應應用程序... 這裏是我的主要組件代碼。當我剛剛'<Route path="/" component={App} />'沒有'<Route path="/admin" component={Admin} />'應用程序組件得到渲染，但是當我有兩個，沒有得到渲染。想知道我是否做錯了什麼。由於某種原因，我的路由反應不起作用使用react-router

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;

和我的WebPack配置

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, 
    } 
};

來源

2017-08-05 Priince Abalogu

你試過將切換到使你的路由專？ https://reacttraining.com/react-router/web/api/Switch 您可能還需要精確的屬性添加到您家的路徑，像這樣： <路線確切路徑=「/」組件= {App} /> – eulloa

謝謝..確切的是一個更微妙的答案 –

陣營，路由器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>,

來源

2017-08-05 19:59:09

不要忘記導入切換從react-router- DOM！但亞歷克斯是對的。 – archae0pteryx

我覺得你的問題是不是適用於你的管理組件和路由器只接受一個孩子的MUI主題提供商。試着將你的muithemeprovider這裏來代替：

ReactDOM.render(

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

所以，它是適用於所有的組件，而不僅僅是應用

來源

2017-08-05 20:01:44 archae0pteryx

由於某種原因，我的路由反應不起作用使用react-router

回答

相關問題