Question

我正在构建一个网络应用程序来学习反应，当我尝试制作菜单时，我的菜单链接不起作用。奇怪的是，我正在使用materialize css并且移动菜单工作得很好但是在大屏幕中，作为我的计算机，它不起作用且Links标签是相同的！救命啊！

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Features from './pages/Features';
import Archives from './pages/Archives';
import Settings from './pages/Settings';
import Home from './pages/Home';

class Index extends React.Component{
  print(){
    console.log("TESTE@@@@");
  }

  render(){
    return(
      <div>
        <Router>
          <div>
            <nav className="light-blue lighten-1" role="navigation">
              <div id="navbar" className="nav-wrapper container">
                <Link to="/" className="brand-logo">App Teste</Link>
                <div className="right hide-on-med-and-down">
                  <ul className="tabs tabs-transparent" style={{height: 64}}>
                    <li className="tab" style={{paddingTop: 10}}><Link to="features" onClick={this.print}>Features</Link></li>
                    <li className="tab" style={{paddingTop: 10}}><Link to="archives">Archives</Link></li>
                    <li className="tab" style={{paddingTop: 10}}><Link to="settings">Settings</Link></li>
                  </ul>
                </div>


                <ul id="nav-mobile" className="side-nav">
                  <li><Link to="features">Features</Link></li>
                  <li><Link to="archives">Archives</Link></li>
                  <li><Link to="settings">Settings</Link></li>
                </ul>
                <a href="#" data-activates="nav-mobile" className="button-collapse"><i className="material-icons">menu</i></a>
              </div>
            </nav>

            <Route exact path="/" component={Home}/>
            <Route path="/archives" component={Archives}/>
            <Route path="/settings" component={Settings}/>
            <Route path="/features" component={Features}/>
          </div>
        </Router>
      </div>
    );
  }
}

ReactDOM.render(
  <Index/>,
  document.getElementById('root')
);

在我的每个页面上，我只有<h1></h1>说明目前的页面是什么。因此，如果它是Home页面，它显示Home，如果它是Archives页面，则显示Archives ..

最后一点，当我点击任何链接时，没有任何反应，不加载页面并且不会更改网址。

有些链接不适用于JSX

0 个答案: