在我通过 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>
)
最佳答案
尝试将此部分更改为:
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';
关于javascript - React 和 HashRouter - 出现空白页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45812201/