Question

我是新来的响应者，我对使用React路由器链接感到困惑，我不知道自己在做什么错，希望我能在这里得到答案。

我已经开发了屏幕，该屏幕具有一个应用程序栏和一个抽屉，单击该按钮可打开应用程序栏中存在的图标。这部分工作正常。在抽屉上，我有三个链接，在每个链接上单击时，我想在抽屉菜单的右侧加载其他屏幕。我试图通过在这里使用反应路由来做到这一点，但是我遇到了类似的问题：您不应该在路由器外部使用链接-堆栈溢出

我试图了解有关stackoverflow的以下问题的答案，但无法正确获取它。你能帮我如何使用ListItems中的链接

下面是我的代码：

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中，您正在DrawerMenu之外渲染Router。您将路由包含在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>

在React rmwc中将<link />与<listitem>一起使用时，链接应该不在路由器错误之外

1 个答案: