Question

我对一般的反应和编程相对较新，并且出现了一个问题，我现在已经尝试解决了一段时间，但似乎无法找到解决方案。我遇到的问题是，无论何时我按下链接“登录”＃39; （可以在最后一个代码片段中找到）我收到错误，

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.listamaya</groupId>
    <artifactId>listamaya</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>8.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.8-dmr</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish.jersey.containers</groupId>
            <artifactId>jersey-container-servlet</artifactId>
            <version>2.26</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish.jersey.inject</groupId>
            <artifactId>jersey-hk2</artifactId>
            <version>2.26</version>
        </dependency>
    </dependencies>
</project>

我相信它与链接本身或路由器有关。当我按下链接时，它会改变路径为＆＃34; / login＆＃34;但它不会改变页面。我遵循了本教程（https://www.youtube.com/watch?v=W6m2qUCYLuk）并在其中使用了Router而不是BrowserRouter，但我遇到了一些错误并在此处阅读，您现在应该使用BrowserRouter。因此，我必须进行任何更改，因为我使用的是BrowserRouter而不是Router？

路由器的代码：

Uncaught ReferenceError: Link is not defined
at Object.render (bundle.js:37775)
at bundle.js:33451
at measureLifeCyclePerf (bundle.js:32731)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:33450)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:33477)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:33017)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:32913)
at Object.mountComponent (bundle.js:4990)
at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:33420)
at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:33379)

这是主要代码（我缩短了它，只添加了链接所在的相关部分）：

var React = require('react');
var ReactDOM = require('react-dom');

require('./css/index.css');

import {BrowserRouter, Route, browserHistory, Link} from 'react-router-
dom';

var Login = require('./login');
var CreateNewAcc = require('./createNewAcc');

var App = React.createClass({
    render: function(){
        return(
            <BrowserRouter history={browserHistory}>
                <div>
                    <Route path={'/'} component={MainComponent}/>
                    <Route path={'/login'} component={Login}/>
                    <Route path={'/createNewAcc'} component=
{CreateNewAcc}/>
                </div>
            </BrowserRouter>
        );
    }
});

Package.json文件

var MainComponent = React.createClass({
render: function(){
    return(
        <div className='wrapper'>
            <div className='header'>
                <img className='logo' src='./images/loop.png'></img>
                <div className='loginDiv'>
                    <Link className='login' to={'/login'}>Logga in</Link>
                </div>
            </div>

提前致谢！

Answer 1

在MainComponent <Link>内部移除{}，以便在MainComponent中执行：

 import { Link } from 'react-router-dom';

 <Link className='login' to="/login">Logga in</Link>

您可以在Link

上阅读更多内容

ReactJS Uncaught ReferenceError：未定义链接

1 个答案: