Question

我是新手，很难调试它。

我有以下代码：App.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import * as BooksAPI from './data/BooksAPI';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

const BookSearch = observer(class BookSearch extends Component{

    state = observable({
        query: '',
        books: []
    })

  searchBooks = (query) =>{
    this.setState({ query: query.trim() });
    BooksAPI.search(query, 20).then((books) =>{
      this.setState({ books: books });
    })
  }

    render(){

        const { query } = this.state;
        const bookSearch =  this.state.books.map((book) => 
                <li key={book.id}>
                    <div className="book">
                        <div className="book-top">
                            <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${ book.imageLinks.thumbnail })` }}></div>
                            <div className="book-shelf-changer">
                                <select onChange={(event) => this.props.bookChange(book, event.target.value)}>
                                    <option>Move to...</option>
                                    <option value="currentlyReading">Currently Reading</option>
                                    <option value="wantToRead">Want to Read</option>
                                    <option value="read">Read</option>
                                    <option value="none">None</option>
                                </select>
                            </div>
                        </div>
                        <div className="book-title">{ book.title }</div>
                        <div className="book-authors">{ book.authors.map((author) => 
                            <span key={ author + book.title } >{ author }</span>
                        )}</div>
                    </div>
                </li>
            ) ;

        return(
            
            <div className="App">   
            <div className="search-books">
                <div className="search-books-bar">
                    <Link className="close-search" to='/'>Close</Link>
                    <div className="search-books-input-wrapper">

                        <input 
                            type="text" 
                            placeholder="Search by title or author"     
                            onChange={ this.searchBooks}
                        />  
                    </div>
                </div>
                <div className="search-books-results">
                    <div className="bookshelf">
                <h2 className="bookshelf-title">{ this.state.query }</h2>
                <div className="bookshelf-books">
                    <ol className="books-grid">
                        { bookSearch }
                    </ol>
                </div>
            </div>
            </div>
            </div>
            
            </div>
        )
    }
})

export default BookSearch

还有 index.js

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

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

它继续在 ReactDom.render(.. 上绊倒 - 刚开始反应，这个概念让我感到困惑。唯一真正的错误或输出如下：'You should not use <Link> outside a <Router>'

我不知道如何控制台登录反应，所以我对如何解决这个问题有点困惑。

Answer 1

如文档中所述，您需要用 App 组件包装整个 Router，以便 `Link 可以访问它。

https://reactrouter.com/web/guides/quick-start

所以基本上：

在 <div className="App"> 之前用

import {BrowserRouter as Router} from 'react-router-dom';

...


return (
  <Router>
    .. your stuff
  <Router/>
)

'你不应该在 <Router> 之外使用 <Link>' 调试反应

1 个答案: