Javascript 如何从react路由器升级到react路由器dom？

如果我想从

“react router”：“^2.0.0”

升级到

“react router”：“^4.0.0”，“react router dom”：“^4.0.0”

。 我的结构应该是这样的：

主组件：是每个事物的容器组件（ 家长）

导航组件：用于在我的其他子组件之间导航，该组件应始终显示

子组件：示例、关于、测试。其中Test是默认值

---

我的旧代码按预期工作如下：

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;

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;

-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 { 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{Route，Router，IndexRoute，hashHistory}=require（'react-Router'）；
ReactDOM.render(
,
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;

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;

var React=require（'React'）；
var Nav=要求（“Nav”）；
var Main=（道具）=>{
返回(
{props.children}
);
}
module.exports=Main；

-我的导航组件如下所示：

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;

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;

var React=require（'React'）；
var{Link，IndexLink}=require（'react-router'）；
var Nav=（）=>{
返回(
试验
关于
例子
);
};
module.exports=Nav；

---

我尝试这样升级：

-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 { 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{BrowserRouter，Route}=require（'react-router-dom'）；
ReactDOM.render(
,
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;

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;

var React=require（'React'）；
var{Link，NavLink}=require（'react-router-dom'）；
var Nav=（）=>{
返回(
试验
关于
例子
);
}
module.exports=Nav；

---

我面临以下问题：

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

网络：：错误连接被拒绝

---

因此，您需要更改App.jsx模块，使其仅呈现主组件，因为现在您可以将路由器移动到其中。React Router v4不再渲染其到道具子级的路由。现在，您需要在您希望渲染它的特定位置声明它

App.jsx

ReactDOM.render(
      <Main/>,
      document.getElementById('app')
);

ReactDOM.render(
,
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;

var React=require（'React'）；
var Nav=要求（“Nav”）；
var{HashRouter，Route，Switch}=require（'react-router-dom'）；
var Main=（道具）=>{
返回(
);
}
module.exports=Main；

• 因此，现在您的主要组件可以像父组件一样工作
• 若删除管线组件的路径属性，其行为将类似于默认值。您可能还注意到我添加了开关组件。它应确保只呈现一条路线。您可以在中查看详细信息
• 以前，您使用hashHistory作为路由器，现在您可以使用HashRouter进行同样的操作。这将解决您遇到的错误

---

非常感谢，但是您已经删除了

{props.children}

孩子们是如何呈现的！？如果我想使子组件居中，我应该在每个子组件（示例、关于和测试）上添加css类，还是可以在

main

组件中添加css类？现在Route是一个常规组件，只要它匹配路径，就会呈现它。它不再使用

{props.children}

。所以在交换机组件内部，其中一个路由组件将匹配并呈现attr中提供的组件。你可以将你的组件放在主界面的中心，只需将你的

开关

用

div

包装起来，并对其应用CSS样式。非常感谢，你能说明

和

之间的区别吗请

浏览器路由器

使用HTML5历史API，因为你还需要正确配置你的服务器。当

HashRouter

使用URL的哈希部分时。e、 g.带BrowserRouter的“/examples”和带HashRouter的“/#examples”