如何从 react-router 升级到 react-router-dom？

Posted 2023-02-21

【中文标题】如何从 react-router 升级到 react-router-dom？

【英文标题】：How to upgrade from react-router to react-router-dom?

【发布时间】：2017-09-26 21:16:56

【问题描述】：

如果我想从"react-router": "^2.0.0" 升级到"react-router": "^4.0.0","react-router-dom": "^4.0.0"。 我的结构应该是这样的：

主组件：是所有事物的容器组件（ 父母）。 导航组件：用于在我的其他子组件之间导航，该组件应始终出现。 子组件：示例、关于、测试。其中 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;

---

我面临以下问题：

测试组件不像以前那样默认了。 主组件的行为不像父组件。 在示例中刷新浏览器时，出现以下错误：

http://localhost:5000/examplesnet::ERR_CONNECTION_REFUSED

【参考方案1】：

所以你需要改变你的 App.jsx 模块，所以它只渲染主组件，因为现在你可以把你的路由器移到那里。 React Router v4 不再将其路由渲染到 props 子级。现在你需要在你想要渲染它的特定位置声明它。

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;

所以现在您的 Main 组件可以像父组件一样工作。 如果您删除 Route 组件的路径属性，它将表现得像默认值一样。您也可能注意到我添加了 Switch 组件。它应该确保一个路由被独占渲染。您可以在manual查看详细信息。 以前，您使用 hashHistory 作为路由器，现在您可以使用 HashRouter 来做同样的事情。这应该可以解决您遇到的错误。

【讨论】：

非常感谢，但您已经删除了props.children 孩子们是如何渲染的！？如果我想让孩子居中，我应该在每个子组件（示例、关于和测试）上添加 css 类，还是可以在main 组件中这样做？

现在 Route 是一个常规组件，只要它匹配到路径，它就会被渲染。它不再使用props.children。因此，在 switch 组件中，Route 组件之一将匹配并呈现 attr 中提供的组件。您可以在 Main 中将您的组件居中，只需将您的 Switch 包装为 div 并对其应用 CSS 样式。

非常感谢，请您说明<BrowserRouter> 和<HashRouter> 之间的区别

BrowserRouter 使用 html5 历史 API，因为您还需要正确配置服务器。当HashRouter 使用 URL 的哈希部分时。例如'/examples' 与 BrowserRouter 和 '/#examples' 与 HashRouter