从反应路由器3.x移动到4.x. [英] Moving from react router 3.x to 4.x
问题描述
如何使用 https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js
使用 https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js
?
使用3.x以下的示例。
Example using 3.x below.
HTML
<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>
JS
let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;
history.replaceState(0,0,'/');
const Main = () =>
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home}/>
<Route path='map' component={Map}/>
<Route path='settings' component={Settings}/>
<Redirect from='foo' to='/' />
<Route path='*' component={NotFound}/>
</Route>
</Router>
const App = props =>
<div>
<Navigation>
<Link to='/map'>Map</Link>
<Link to='/settings'>Settings</Link>
<Link to='/foo'>Foo</Link>
</Navigation>
{props.children}
</div>
const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const NotFound = (props) => <h1>404 - Not Found</h1>
ReactDOM.render(<Main />, document.body);
请参阅以下网址: https://jsfiddle.net/developit/nvpr63eg/
如果我搬到任何CDN托管4 .x版本虽然不起作用(返回语句后无法访问的代码)。
If I move to any of the CDN hosted 4.x versions though it doesn't work (unreachable code after return statement).
推荐答案
我能用redux配置它通过更改一些内容:
I was able to configure it with redux by changing a few things:
首先, browserHistory
未在 react-router上定义
了。获得它的一种方法是使用包历史
。
First, browserHistory
is not defined on react-router
anymore. One way to get it back is to use the package history
.
您需要安装(redux可选) :
You will need to install (redux optional):
npm i -S history react-router react-router-redux
而不是尝试导入 browserHistory
使用:
import { createBrowserHistory } from 'history';
如果您想使用redux,请将其导入并将其添加到合并的Reducer:
If you want to use redux then import this and add it to your combined reducers:
import { routerReducer as routing } from 'react-router-redux';
combineReducers({
home, about,
routing, // new
});
接下来你创建历史
对象
// redux
import { syncHistoryWithStore } from 'react-router-redux';
const history = syncHistoryWithStore(createBrowserHistory(), store);
// regular
const history = createBrowserHistory();
然后更改路由器以使用新的历史记录
对象
Then change your router to use the new history
object
<Router history={ history } children={ Routes } />
其他一切都应该相同。
如果有人遇到道具历史记录在路由器中标记为必需,但其值未定义。
这是因为 browserHistory
在react-router中不再可用,请参阅post to use history package。
It is because browserHistory
is no longer available in react-router, see post to use history package instead.
相关
- Github ts-react-redux-startup: Project that uses it
- Migrating to React Router 4 with Redux
这篇关于从反应路由器3.x移动到4.x.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!