如何从react-router升级到react-router-dom?
How to upgrade from react-router to react-router-dom?
如果我想从 "react-router": "^2.0.0"
升级到 "react-router": "^4.0.0","react-router-dom": "^4.0.0"
。
我的结构应该是这样的:
- Main Component : 是所有事物的容器组件(
parent).
- Nav 组件:用于在我的其他 child 组件之间导航,此组件应始终显示。
- Child 组件:示例、关于、测试。其中 Test 是默认值。
我按预期工作的旧代码是这样的:
-App.jsx
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="about" component={About}/>
<Route path="examples" component={Examples}/>
<IndexRoute component={Test}/>
</Route>
</Router>,
document.getElementById('app')
);
-主要组件是这样的:
var React = require('react');
var Nav = require('Nav');
var Main = (props) => {
return (
<div>
<Nav/>
{props.children}
</div>
);
}
module.exports = Main;
-我的导航组件是这样的:
var React = require('react');
var {Link, IndexLink} = require('react-router');
var Nav = () => {
return (
<div>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Test</IndexLink>
<Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>About</Link>
<Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Examples</Link>
</div>
);
};
module.exports = Nav;
我尝试这样升级:
-App.jsx
var { BrowserRouter, Route } =require('react-router-dom');
ReactDOM.render(
<BrowserRouter>
<div>
<Route path='/' component={Main} />
<Route path='/Test' component={Test}/>
<Route path='/about' component={About}/>
<Route path='/examples' component={Examples}/>
</div>
</BrowserRouter>,
document.getElementById('app')
);
-我的主要组件没有变化
-我的导航组件是这样的:
var React = require('react');
var {Link, NavLink} =require('react-router-dom');
var Nav = ()=>{
return(
<div>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/Test">Test</NavLink>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/about">About</NavLink>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/examples">Examples</NavLink>
</div>
);
}
module.exports = Nav;
我面临以下问题:
- 测试组件不像以前那样默认。
- 主要组件的行为不像 parent。
- 当我在 Examples 上刷新浏览器时,出现以下错误:
http://localhost:5000/examples net::ERR_CONNECTION_REFUSED
因此您需要更改 App.jsx 模块,因此它只渲染主组件,因为现在您可以将路由器移到那里。 React Router v4 不再将它的路由渲染到 props children。现在你需要在你想要渲染它的特定位置声明它。
App.jsx
ReactDOM.render(
<Main/>,
document.getElementById('app')
);
主要成分
var React = require('react');
var Nav = require('Nav');
var { HashRouter, Route, Switch } = require('react-router-dom');
var Main = (props) => {
return (
<HashRouter>
<Nav/>
<Switch>
<Route path='/about' component={About}/>
<Route path='/examples' component={Examples}/>
<Route component={Test}/>
</Switch>
</HashRouter>
);
}
module.exports = Main;
- 现在您的主组件可以像父组件一样运行了。
- 如果您删除 Route 组件的路径属性,它的行为将与默认行为相同。您可能还注意到我添加了 Switch 组件。它应该确保只呈现一条路线。您可以在manual.
中查看详细信息
- 之前,您为路由器使用了 hashHistory,现在您可以使用 HashRouter 来做同样的事情。这应该可以解决您遇到的错误。
如果我想从 "react-router": "^2.0.0"
升级到 "react-router": "^4.0.0","react-router-dom": "^4.0.0"
。
我的结构应该是这样的:
- Main Component : 是所有事物的容器组件( parent).
- Nav 组件:用于在我的其他 child 组件之间导航,此组件应始终显示。
- Child 组件:示例、关于、测试。其中 Test 是默认值。
我按预期工作的旧代码是这样的:
-App.jsx
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="about" component={About}/>
<Route path="examples" component={Examples}/>
<IndexRoute component={Test}/>
</Route>
</Router>,
document.getElementById('app')
);
-主要组件是这样的:
var React = require('react');
var Nav = require('Nav');
var Main = (props) => {
return (
<div>
<Nav/>
{props.children}
</div>
);
}
module.exports = Main;
-我的导航组件是这样的:
var React = require('react');
var {Link, IndexLink} = require('react-router');
var Nav = () => {
return (
<div>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Test</IndexLink>
<Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>About</Link>
<Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Examples</Link>
</div>
);
};
module.exports = Nav;
我尝试这样升级:
-App.jsx
var { BrowserRouter, Route } =require('react-router-dom');
ReactDOM.render(
<BrowserRouter>
<div>
<Route path='/' component={Main} />
<Route path='/Test' component={Test}/>
<Route path='/about' component={About}/>
<Route path='/examples' component={Examples}/>
</div>
</BrowserRouter>,
document.getElementById('app')
);
-我的主要组件没有变化
-我的导航组件是这样的:
var React = require('react');
var {Link, NavLink} =require('react-router-dom');
var Nav = ()=>{
return(
<div>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/Test">Test</NavLink>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/about">About</NavLink>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/examples">Examples</NavLink>
</div>
);
}
module.exports = Nav;
我面临以下问题:
- 测试组件不像以前那样默认。
- 主要组件的行为不像 parent。
- 当我在 Examples 上刷新浏览器时,出现以下错误:
http://localhost:5000/examples net::ERR_CONNECTION_REFUSED
因此您需要更改 App.jsx 模块,因此它只渲染主组件,因为现在您可以将路由器移到那里。 React Router v4 不再将它的路由渲染到 props children。现在你需要在你想要渲染它的特定位置声明它。
App.jsx
ReactDOM.render(
<Main/>,
document.getElementById('app')
);
主要成分
var React = require('react');
var Nav = require('Nav');
var { HashRouter, Route, Switch } = require('react-router-dom');
var Main = (props) => {
return (
<HashRouter>
<Nav/>
<Switch>
<Route path='/about' component={About}/>
<Route path='/examples' component={Examples}/>
<Route component={Test}/>
</Switch>
</HashRouter>
);
}
module.exports = Main;
- 现在您的主组件可以像父组件一样运行了。
- 如果您删除 Route 组件的路径属性,它的行为将与默认行为相同。您可能还注意到我添加了 Switch 组件。它应该确保只呈现一条路线。您可以在manual. 中查看详细信息
- 之前,您为路由器使用了 hashHistory,现在您可以使用 HashRouter 来做同样的事情。这应该可以解决您遇到的错误。