Reactjs 反应路由器导航条示例

我是React JS的初学者，希望为我的仪表板开发一个基于React路由器的导航。模型如下：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import Login from './components/Login.js';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})


render((
  <li>
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
    </Route>
  </Router>
  </li>
), document.getElementById('placeholder'))

我为尝试路由而创建的app.js代码如下：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import Login from './components/Login.js';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})


render((
  <li>
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
    </Route>
  </Router>
  </li>
), document.getElementById('placeholder'))

从“React”导入React
从'react dom'导入{render}
从“react Router”导入{Router，Route，Link}
从“./components/Login.js”导入登录名；
const App=React.createClass({
render（）{
返回(
应用程序

登录
收件箱

{this.props.children}
)
}
})
渲染((


)，document.getElementById（'placeholder'））

---

如何创建模型中所示的导航？

是的，Daniel是正确的，但要扩展他的答案，您的主要应用程序组件需要在其中包含一个导航栏组件。这样，当您呈现主应用程序（位于“/”路径下的任何页面）时，它也会显示导航栏。我猜您不希望登录页面显示导航栏，因此它不应该是嵌套组件，而应该单独显示。因此，您的路线将最终看起来像这样：

<Router>
  <Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
  </Route>
  <Route path="/login" component={Login} />
</Router>

var NavBar = React.createClass({
  render() {
    return (
      <div>
        <ul>
          <a onClick={() => history.push('page1') }>Page 1</a>
          <a onClick={() => history.push('page2') }>Page 2</a>
        </ul>
      </div>
    )
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <NavBar />
        <div>Other Content</div>
        {this.props.children}
      </div>
    )
  }
});

其他组件看起来像这样：

<Router>
  <Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
  </Route>
  <Route path="/login" component={Login} />
</Router>

var NavBar = React.createClass({
  render() {
    return (
      <div>
        <ul>
          <a onClick={() => history.push('page1') }>Page 1</a>
          <a onClick={() => history.push('page2') }>Page 2</a>
        </ul>
      </div>
    )
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <NavBar />
        <div>Other Content</div>
        {this.props.children}
      </div>
    )
  }
});

var NavBar=React.createClass({
render（）{
返回(

history.push（'page1'）}>第1页
history.push（'page2'）}>第2页

)
}
});
var App=React.createClass({
render（）{
返回(
其他内容
{this.props.children}
)
}
});

请注意，接受的示例非常好，但希望添加一个版本4示例，因为它们差异很大

Nav.js

从“React”导入React；
从“反应路由器”导入{Link}；
导出默认类Nav.Component{
render（）{
返回(


链接1


链接2


链接3


);
}
}

App.js

从“React”导入React；
从“反应路由器”导入{链路、交换机、路由}；
从“./Nav”导入Nav；
从“/Page1”导入第1页；
从“/Page2”导入第2页；
从“/Page3”导入第3页；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

或者，如果您想要更具动态性的nav，您可以查看优秀的v4文档：

编辑 一些人询问过没有导航的页面，比如登录页面。我通常使用包装器路由组件来实现它

  import React from 'react';
  import { Link, Switch, Route } from 'react-router';
  import Nav from './nav';
  import Page1 from './page1';
  import Page2 from './page2';
  import Page3 from './page3';

  const NavRoute = ({exact, path, component: Component}) => (
    <Route exact={exact} path={path} render={(props) => (
      <div>
        <Header/>
        <Component {...props}/>
      </div>
    )}/>
  )

  export default class App extends React.Component {
    render() {    
      return (
        <div className="App">
          <Router>
              <Switch>
                <NavRoute exactly component={Landing} pattern="/" />
                <Route exactly component={Login} pattern="/login" />
                <NavRoute exactly component={Page1} pattern="/path1" />
                <NavRoute exactly component={Page2} pattern="/path2" />
                <NavRoute component={Page404} />
              </Switch>
          </Router>
        </div>
      );
    }
  }

从“React”导入React；
从“反应路由器”导入{链路、交换机、路由}；
从“./Nav”导入Nav；
从“/Page1”导入第1页；
从“/Page2”导入第2页；
从“/Page3”导入第3页；
const NavRoute=（{exact，path，component:component}）=>(
(
)}/>
)
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

问题是什么？您想知道如何创建组件吗？路由与此有什么关系？我想使用模型中提到的react路由器创建导航。你试过谷歌吗？你的问题不是一个可以解决的具体问题，而是一个非常普遍的问题。只要看看如何创建一个组件，你就可以开始了！看看它可能会让你的生活更轻松为什么使用history.push而不是？历史从哪里加载？

react router

建立在

history

的基础上，因此它从'react router'导入{router，Route，Link}这一行进入场景。您也可以使用元素，而不是显式地使用

history.push

链接。当前的v4路由器只允许一个子节点。我在我的应用程序中修复了这个问题，用一个。然后，我不得不将导航置于一个before开关中，以便它能够接收路线道具历史记录、比赛和位置。请更新您的答案。如果您有一个登录页面，这是如何工作的？可能不希望登录页面上显示导航栏。有办法解决这个问题吗？@ChadGreenburg你能问一个单独的问题并把它链接到这里吗？在评论节目中回答这个问题太困难了。我是否在导航栏中设置了有条件的“活动”类？@Si8我想我会制定一条着陆路线。例如：