React & HashRouter - 得到空白页

Question

在我通过react-router-dom 在客户端设置路由后，我得到的只是空白页。

所以，我的设置就在这里。我敢打赌有什么问题，但我无法理解。

那怎么来的？怎么了？

索引：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes} />
    </Provider>,
    document.getElementById("content")
);

路线在这里：

import React from 'react';
import ReactDOM from 'react-dom';
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import App from './containers/app.js';
import Settings from './components/settings/settings.js';
import NotFound from './components/common/notfound';

export default (
    <Route exact path="/" component={App}>
        <Route exact path="/settings" component={Settings} />
        <Route path="*" component={NotFound} />
    </Route>
)

Answer 1

尝试将此部分更改为：

ReactDOM.render(
    <Provider store={store}>
    <Router>
      <Route exact path="/" component={App}>
        <Route exact path="/settings" component={Settings} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
    </Provider>,
    document.getElementById("content")
);

我认为 react-router v4 无法识别这部分：<Router routes={routes} />

修订： 以上代码有两个问题。

1) 你不应该在路由中放置子路由。这部分不正确：

<Route exact path="/" component={App}>
  <Route exact path="/settings" component={Settings} />
  <Route path="*" component={NotFound} />
</Route>

2) 无论路径是什么，<NotFound /> 总是被渲染。

解决方案：

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
    HashRouter as Router,
    Route,
    Link,
} from 'react-router-dom'

import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
          <Route path="/" component={App} />
        </Router>
    </Provider>,
    document.getElementById("content")
);

App.js

将此代码插入您要呈现内容的位置：

<Switch>
   <Route exact path="/" component={Home} />
   <Route exact path="/settings" component={Settings} />
   <Route path="*" component={NotFound} />
</Switch>

别忘了加import {Switch, Route} from 'react-router-dom';