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