Question

我正在使用带反应路由器的create-react-app，当我运行npm测试时，我一直收到测试错误。链接工作正常，但它没有通过测试。我收到错误代码不变违规：您不应该使用路由器外的链接。

所以我用路由器包装了代码块，然后通过了测试。但是链接不再起作用。

我如何获得工作链接和应用程序同时通过测试？

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from 'react-router-dom';

const App = () => {
return (
//<Router>
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
      <p>This is the App page</p>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/app">App</Link></li>
  </ul>
  </div>
//</Router>
   );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Home from './Home';
import NoMatch from './NoMatch';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route, Switch } from 'react-router-  dom';

const Root = () => {
return(
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/app" component={App} />
<Route component={NoMatch}/>
</Switch>
</Router>
) 
}

ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();

React Router Invariant Violation测试失败，<link />在<router>之外

0 个答案: