reactjs中的引导和react-router有什么帮助吗

时间:2019-10-29 18:25:11

标签: reactjs react-router

我是React的新手,并且使用react-routerbootstrap 3.4版示例部分。

第一个示例-运行我的项目时未显示我的项目。我将显示代码:

import React from "react"
class Header extends React.Component{
    render(){
        return(
            <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">Project name</a>
              </div>
              <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#contact">Contact</a></li>
                </ul>
              </div>
            </div>
          </nav>
        )
    }
}
export default Header

href属性需要一个有效值才能访问。提供有效的可导航地址作为href值。如果您不能提供有效的href,但仍需要该元素类似于链接,请使用按钮并以适当的样式对其进行更改。

1 个答案:

答案 0 :(得分:0)

这可能会帮助

组件和组件均可用于定义和设计围绕应用程序的声明式导航。在这两个组件中,我们都可以使用“ to”属性来指定链接将定向到的位置路径名。

import { NavLink } from "react-router-dom";

  <NavLink to="/" className="<any classes like>float-left">Home</NavLink>
  <NavLink to="/about" className="<any classes like>float-left">About</NavLink>

这是一个很好的例子 https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900