-1

我正在使用反应路由器。请查看我的代码 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import Home from './components/Home';
import Services from './components/Services';
import Plans from './components/Plans';


import Navigation from './Navigation';

import Contact from './App2';

import reportWebVitals from './reportWebVitals';
// import browserHistory  from 'react-router';
import {IndexRoute,browserHistory} from 'react-router';
import { BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom';
import { NavLink } from 'react-router-dom';



ReactDOM.render(
    <div>
        <Router>
        <div>
        
         <NavLink to="/">Home</NavLink>
          
          <NavLink to="/contact">Contact</NavLink>
          <NavLink to="/services">Sercices</NavLink>
          <NavLink to="/plans">Plans</NavLink>
        <Switch>
         <Route path="/" component={Home} exact/>
         
         <Route path="/contact" component={Contact}/>
         <Route path="/plans" component={Plans}/>
         <Route path="/services" component={Services}/>

        <Route component={Error}/>
       </Switch>
         </div> 
        </Router>

    </div>
  ,
  document.getElementById('roots')
);

主页.jsx

import React from 'react';
const Home=()=>{
    return(
        <div>
            <h1>Hello world</h1>
            <p>This is home page</p>
            
        </div>
    );
}
export default Home;

一切正常。但我想将链接添加到我的 home.jsx 并将这一行添加到 Home.jsx

<NavLink path="/plans">contact me</NavLink>

它显示错误

Failed to compile
src\components\Home.jsx
  Line 7:5:  'Navlink' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

当我使用锚标记时，它工作正常，但页面重新加载。我不想重新加载页面。

任何帮助将不胜感激。谢谢。

4

3 回答 3

1

您导入NavLink并使用Navlink.

您的contact me代码应该是： <NavLink path="/plans">contact me</NavLink>

于 2021-09-26T20:05:12.810 回答
1

它应该是带有大写 L 的 NavLink 而不是 Navlinks 并使用“to”而不是“path”

于 2021-09-26T20:12:20.343 回答
-1

最后我找到了解决方案。应将以下行添加到我们使用该组件的特定文件中。

import { NavLink } from 'react-router-dom';
于 2021-09-26T20:37:34.247 回答