Question

这是我在Stackoverflow上的第一篇文章，希望大家能给我一些指导。

我目前正在学习React Router，看来我陷入了无法解决的错误或错误。为了给您一些有关设置的概述，这里是：

我正在将CRA与React-Router-DOM 5.0.1一起使用。我正在使用React Hooks进行练习并使用最新版本的React 16.8.6

这是一个读取本地API并将其数据呈现在不同组件上的应用。这是代码：

App.js

import usb

device = usb.core.find(idVendor = 0x0461, idProduct = 0x4d65) #mouse
if device is None:
    raise ValueError('No device')
print(device)

interface = 0
if device.is_kernel_driver_active(interface):
    print("kernel driver active")


The output is:
DEVICE ID 0461:4d65 on Bus 008 Address 002 =================
bLength                :   0x12 (18 bytes)
bDescriptorType        :    0x1 Device
bcdUSB                 :  0x200 USB 2.0
bDeviceClass           :    0x0 Specified at interface
bDeviceSubClass        :    0x0
bDeviceProtocol        :    0x0
bMaxPacketSize0        :    0x8 (8 bytes)
idVendor               : 0x0461
idProduct              : 0x4d65
bcdDevice              :  0x200 Device 2.0
iManufacturer          :    0x0 
iProduct               :    0x2 USB Optical Mouse
iSerialNumber          :    0x0 
bNumConfigurations     :    0x1
CONFIGURATION 1: 98 mA ===================================
bLength              :    0x9 (9 bytes)
bDescriptorType      :    0x2 Configuration
wTotalLength         :   0x22 (34 bytes)
bNumInterfaces       :    0x1
bConfigurationValue  :    0x1
iConfiguration       :    0x0 
bmAttributes         :   0xa0 Bus Powered, Remote Wakeup
bMaxPower            :   0x31 (98 mA)
    INTERFACE 0: Human Interface Device ====================
    bLength            :    0x9 (9 bytes)
    bDescriptorType    :    0x4 Interface
    bInterfaceNumber   :    0x0
    bAlternateSetting  :    0x0
    bNumEndpoints      :    0x1
    bInterfaceClass    :    0x3 Human Interface Device
    bInterfaceSubClass :    0x1
    bInterfaceProtocol :    0x2
    iInterface         :    0x0 
    ENDPOINT 0x81: Interrupt IN ==========================
    bLength          :    0x7 (7 bytes)
    bDescriptorType  :    0x5 Endpoint
    bEndpointAddress :   0x81 IN
    bmAttributes     :    0x3 Interrupt
    wMaxPacketSize   :    0x6 (6 bytes)
    bInterval        :    0xa
Traceback (most recent call last):
File "c:\Users\me\Documents\Python\usb\usb test.py", line 16, in <module>
    if device.is_kernel_driver_active(interface):
File "C:\Users\me\AppData\Local\Programs\Python\Python37\lib\site-packages\usb\core.py", line 1064, in is_kernel_driver_active
    interface)
File "C:\Users\me\AppData\Local\Programs\Python\Python37\lib\site-packages\usb\backend\libusb1.py", line 898, in is_kernel_driver_active
    intf)))
File "C:\Users\me\AppData\Local\Programs\Python\Python37\lib\site-packages\usb\backend\libusb1.py", line 593, in _check
    raise NotImplementedError(_strerror(ret))
NotImplementedError: Operation not supported or unimplemented on this platform

Writers.js

import React, { Fragment, useState, useEffect } from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import axios from 'axios';

import Writers from './Writers';

function App() {
  const [writers, setWriters] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios('http://localhost:3004/writers');
      setWriters(result.data);
    };

    fetchData();
  }, []);

  return (
    <BrowserRouter>
      <Fragment>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/writers'>Writers</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path='/' render={() => <div>Home</div>} />
          <Route
            exact
            path='/writers'
            render={props => <Writers {...props} writers={writers} />}
          />
        </Switch>
      </Fragment>
    </BrowserRouter>
  );
}

export default App;

Writer.js

import React, { Fragment } from 'react';
import { Route, Link } from 'react-router-dom';
import Writer from './Writer/index';

const Writers = props => {
  console.log(props);
  return (
    <Fragment>
      <ul>
        {props.writers.map(({ id, name }) => (
          <li key={id}>
            <Link to={`${props.match.url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <Route
        path={`${props.match.url}/:writerID`}
        render={props => <Writer {...props} />}
      />
    </Fragment>
  );
};

export default Writers;

所以我在Writers.js中遇到了一个问题，我在其中传递了参数“ /：writerID”，该参数无法传递到Writer组件，而实际上Writer组件根本无法呈现

import React, { Fragment } from 'react';

const Writer = ({ match, id, name, description }) => {
  console.log(match);
  return <Fragment>id name description</Fragment>;
};

export default Writer;

如果我从路径属性中删除：writerID，则组件Writer会被渲染，但不允许我为其路由唯一的路径。

知道为什么会这样吗？任何帮助将不胜感激。

我尝试确保文件上的导出正确，实际上，我没有从CRA日志中看到任何错误。另外，我从路径道具中删除了参数，似乎Writer组件已渲染，但是如果再次放置，它将无法正常工作。

App.js传递带有道具和作家数据的作家

<Route
        path={`${props.match.url}/:writerID`}
        render={props => <Writer {...props} />}
      />

Writers.js接收数据和Route道具，因此我可以访问Match道具，但是此组件不会渲染Writer组件，也不会获得match.params道具。

<Route
            exact
            path='/writers'
            render={props => <Writers {...props} writers={writers} />}
          />

预期的行为：尝试单击任何单个编写器时，应渲染Writer.js，它应允许我获得match.params属性。

实际行为：不会渲染Writer.js，并且如果我从Route移除路径道具，它将得到渲染，但是我无法访问单个ID。

Answer 1

在/writers的路径路径中，您使用的是确切的道具，这将导致不渲染任何嵌套的路径。删除确切的道具，您的路线将起作用

<Route
        exact
        path='/writers'
        render={props => <Writers {...props} writers={writers} />}
      />

作为经验法则，您应为match.url路径使用Link，为match.path路径使用Route

使用参数时，React Router Render道具未渲染组件

1 个答案: