Link should not be outside router error while using <Link> with <ListItem> in React rmwc

Question

我是 React 新手，我被 react router 的使用卡住了 links，我不知道我做错了什么，希望我能在这里得到答案。

我开发了屏幕，它有一个应用栏和一个抽屉，点击应用栏中的图标即可打开。这部分工作正常。在抽屉上，我有三个 link，单击每个 link，我想在抽屉菜单的右侧加载其他屏幕。我尝试通过在此处使用反应路线来做到这一点，但我遇到了以下问题：您不应该在路由器外使用 Link - Stack Overflow，

我试图理解在 Whosebug 上针对以下问题提到的答案，但无法正确理解。你能帮我如何在 ListItems

中使用 link

下面是我的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'rmwc/Theme';

import AppBar from './components/AppBar';
import DrawerMenu from './components/DrawerMenu';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";


const routes = [
  {
    path: "/",
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  {
    path: "/s",
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  {
    path: "/aa",
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  {
    path: "/bb",
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
];


class MainComponent extends React.Component {

    constructor() {
        super();
        this.state = {
            openNow: false
        }
    }

    toggle = () => {
        const openNow = this.state.openNow;
        this.setState({
            openNow: !openNow
        });
    }

    render() {
        return (
            <ThemeProvider options={{
              primary: '#5d1049',
              secondary: '#fa3336',
              error: '#b00020',
              background: '#fff',
              surface: '#fff',
              onPrimary: 'rgba(255, 255, 255, 1)',
              onSecondary: 'rgba(255, 255, 255, 1)',
              onSurface: 'rgba(0, 0, 0, 0.87)',
              onError: '#fff',
              textPrimaryOnBackground: 'rgba(0, 0, 0, 0.87)',
              textSecondaryOnBackground: 'rgba(0, 0, 0, 0.54)',
              textHintOnBackground: 'rgba(0, 0, 0, 0.38)',
              textDisabledOnBackground: 'rgba(0, 0, 0, 0.38)',
              textIconOnBackground: 'rgba(0, 0, 0, 0.38)',
              textPrimaryOnLight: 'rgba(0, 0, 0, 0.87)',
              textSecondaryOnLight: 'rgba(0, 0, 0, 0.54)',
              textHintOnLight: 'rgba(0, 0, 0, 0.38)',
              textDisabledOnLight: 'rgba(0, 0, 0, 0.38)',
              textIconOnLight: 'rgba(0, 0, 0, 0.38)',
              textPrimaryOnDark: 'white',
              textSecondaryOnDark: 'rgba(255, 255, 255, 0.7)',
              textHintOnDark: 'rgba(255, 255, 255, 0.5)',
              textDisabledOnDark: 'rgba(255, 255, 255, 0.5)',
              textIconOnDark: 'rgba(255, 255, 255, 0.5)'
            }}>

            <Router>
                <div>
                 {routes.map((route, index) => (
                   <Route key={index} path={route.path} exact={route.exact}
                          component={route.sidebar}
                        />            
                 ))}
                </div>
            </Router>
            <AppBar toggle={this.toggle}/>
            <DrawerMenu openNow = {this.state.openNow} />

            </ThemeProvider >
            )
    }
}

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

AppBar.js

import React from 'react';
import ReactDOM from 'react-dom';
import '@material/top-app-bar/dist/mdc.top-app-bar.css';

import {
  TopAppBar,
  TopAppBarRow,
  TopAppBarSection,
  TopAppBarNavigationIcon,
  TopAppBarActionItem,
  TopAppBarTitle,
  SimpleTopAppBar,
  TopAppBarFixedAdjust
} from '@rmwc/top-app-bar';


class AppBar extends React.Component {
    render() {
        return (<div>
                <TopAppBar fixed={true}>
                  <TopAppBarRow>
                    <TopAppBarSection alignStart>
                        <TopAppBarNavigationIcon data-qa="navigationMenu" icon="menu" onClick = {()=>this.props.toggle()}/>
                        <TopAppBarTitle>Workforce</TopAppBarTitle>
                    </TopAppBarSection> 
                  </TopAppBarRow>
                </TopAppBar>
                <TopAppBarFixedAdjust/>
                </div>
               )
    }
}

export default AppBar;

DrawerMenu.js

import React from 'react';
import '@material/drawer/dist/mdc.drawer.css';
import '@material/list/dist/mdc.list.css';
import '../index.css'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import {
  Drawer,
  DrawerHeader,
  DrawerContent,
  DrawerTitle,
  DrawerSubtitle
} from '@rmwc/drawer';


import {
  List,
  ListItem,
  ListItemPrimaryText
 } from '@rmwc/list';


class DrawerMenu extends React.Component {

  handleNavClick(path) {

  }

  render() {
    return (
      <Drawer dismissible open = {this.props.openNow} >
        <DrawerHeader>
          <DrawerTitle>Team</DrawerTitle>
          <DrawerSubtitle>menu</DrawerSubtitle>
        </DrawerHeader>
        <DrawerContent>
          <List>
            <Link to='/aa'><ListItem component={Link} to="/" button />
            </Link>
            <ListItem > My Timesheet</ListItem>
            <ListItem > My Calendar</ListItem>
          </List>
        </DrawerContent>
      </Drawer>
    )
  }
}
export default DrawerMenu;

任何帮助将不胜感激。

Answer 1

在 MainComponent 中，您在 Router 之外渲染 DrawerMenu。您将路由包含在 Router 标记中，但所有 react-router Link 元素也必须在路由器内。 DrawerMenu 使用 Link —— 因此是错误。

以下：

    <Router>
        <div>
         {routes.map((route, index) => (
           <Route key={index} path={route.path} exact={route.exact}
                  component={route.sidebar}
                />            
         ))}
        </div>
    </Router>
    <AppBar toggle={this.toggle}/>
    <DrawerMenu openNow = {this.state.openNow} />

应该改为：

<Router>
    <>
       <div>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} exact={route.exact}
              component={route.sidebar}
            />            
        ))}
       </div>
       <AppBar toggle={this.toggle}/>
       <DrawerMenu openNow = {this.state.openNow} />
    </>
</Router>

Link should not be outside router error while using <Link> with <ListItem> in React rmwc

Link should be not be outside router error while using <Link> with <ListItem> in React rmwc

reactjs

react-router

react-dom