Question

我正在尝试使用react-router-dom进行路由。我得到了一个错误，就像你不应该在外面这样使用。在下面我附上我的代码请检查。

index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import App from './containers/App';




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

App.js

import React from 'react';
import Dropdown from './dropdown';
import './styles.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Addatttemp from './Addatttemp';

const options = [
    {label: 'One' },
    {label: 'Two'},
    {label: 'Three'},
    {label: 'Four' }
]
const AgentValues=[
    {label: 'Add Att/temp', value:'Addatttemp' },
    {label: 'Mod prof LVL',value:'Modproflvl'},
    {label: 'Override Attr',value:'Overrideattr'},
    {label: 'Temp',value:'temp'}
]
const defaultOption = options[0]
export default class App extends React.Component {
    constructor (props) {
        super(props)
    }
    render() {
        return (
            <div>
                <div className="navbar">
                    <div className="align">
                        <div className="dropdown">
                            <Dropdown options={AgentValues} name='Agent'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Templete'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Report'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Search'/>
                        </div>
                    </div>
                </div>
                <Router>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/Agent/Addatttemp' component={Addatttemp} />
                </Switch>
            </Router>
            </div>
        );
    }
}

Dropdown.js

import React, { Component, PropTypes } from "react";
import { Link } from 'react-router-dom';

class dropdown extends Component {
    constructor (props) {
        super(props)
    }
    render(){
        var dropdownList = []
        this.props.options.map((res)=>{
            dropdownList.push(<Link to={'/'}>{res.label}</Link>)
        })
        return(
            <div>
                <button className="dropbtn"><Link to={'/'}>{this.props.name}</Link>
                </button>
                <div className="dropdown-content">
                    {dropdownList}
                </div>
            </div>
        )
    }
}


export default dropdown;

Home.js

import React from 'react'

const Home = () => (
    <div>
        <h1>Welcome to the Tornadoes Website!</h1>
    </div>
)

export default Home

Addatttemp.js

import React from 'react'

const AddTemp = () => (
    <div>
        <h1>Welcome to the Add att/temp!</h1>
    </div>
)

export default AddTemp

像这样我编写了我的代码，但是当我运行此代码时，它会抛出错误，如未捕获错误：您不应该使用路由器外的链接。我无法解决这个问题，请给我一些建议，说明我做错了什么，非常感谢。

Answer 1

正如错误消息所示，您没有Router组件树。

您可以在App组件中使用它

export default class App extends React.Component {
    render() {
        return (
            <Router>
              <div>
            <div className="navbar">
                <div className="align">
                    <div className="dropdown">
                        <Dropdown options={AgentValues} name='Agent'/>
                    </div>
                    <div className="dropdown">
                        <Dropdown options={options} name='Templete'/>
                    </div>
                    <div className="dropdown">
                        <Dropdown options={options} name='Report'/>
                    </div>
                    <div className="dropdown">
                        <Dropdown options={options} name='Search'/>
                    </div>
                </div>
            </div>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route exact path='/Agent/Addatttemp' component={Addatttemp} />
            </Switch>
            </div>
          </Router>
        );
    }
}

同时

您不需要只调用super
的构造函数
// this is noop constructor (props) { super(props) }

使用map时，您不需要推送到外部阵列。

var dropdownList = this.props.options.map(res => ( <Link to={'/'}>{res.label}</Link> ))

Answer 2

如果您试图在页面上显示Link或BrowserRouter之外的任何元素，则会出现此错误。此错误消息表示，不是路由器子级的任何组件都不能包含任何react-router-dom相关组件。

要在React中进行有效的开发，您需要学习的是组件层次结构。

在您的情况下，父级组件位于层次结构顶部的是App，我怎么知道？因为您在index.js文件中在这里说的是这样：

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

因此，在使用react-router-dom时，该层次结构图上的下一个应该是您的BrowserRouter。这是您开始迷失我和React的地方，因为我们都在BrowserRouter组件中寻找App而看不到。

这就是我们现在应该看到的：

const App = () => {
  return (
    <div className="ui container">
      <BrowserRouter>
        <div>
          <Route path="/" exact component={Home} />
          <Route path="/Agent/Addatttemp" exact component={Addattemp} />
        </div>
      </BrowserRouter>
    </div>
  );
};

注意我正在使用exact关键字吗？我使用的是exact关键字，所以我不会意外地匹配要实施的其他路线之一。

因此，请继续添加您的BrowserRouter或您的Router，在BrowserRouter以下的该层次结构中，您的App扮演着更高的BrowserRouter的角色。在层次结构中处于下一个位置，其他所有内容都是该Link的子级，并且必须位于其中。

而且由于您永远都不会在react-router-dom组件内部使用App中的import { BrowserRouter, Route } from "react-router-dom";，所以请像下面这样清理它：

cy.wrap(null) .then(() => register({ email, template: 'basic' })) .then(() => { login(email); }) .then(resp => console.log('Logged IN: ', resp)); console.log('Hello [This logs out BEFORE the logged in -- i want to wait]') cy.wait(1000); cy.visit('/');

按照上述步骤操作后，该错误就会消失。

您不应该使用react-router-dom在路由器外部使用Link

2 个答案: