我有一个我不知道如何解决的问题,运行npm test时出现此错误
永久违规:您不应<Switch>在<Router>
<Switch>
<Router>
问题可能是什么,我该如何解决?我运行的测试是react随附的标准app.test.js
class App extends Component { render() { return ( <div className = 'app'> <nav> <ul> <li><Link exact activeClassName="current" to='/'>Home</Link></li> <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li> <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li> <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li> <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li> <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li> </ul> </nav> <Switch> <Route exact path='/' component={Home}></Route> <Route path='/TicTacToe' component={TicTacToe}></Route> <Route path='/NumGame' component={NumberGame}></Route> <Route path='/HighScore' component={HighScore}></Route> <Route path='/Profile' component={Profile}></Route> <Route path='/Login' component={SignOut1}></Route> </Switch> </div> ); } };
错误是正确的。你需要用的Switch同BrowserRouter状或其他替代品HashRouter,MemoryRouter。这是因为BrowserRouter替代品是所有路由器组件的通用底层接口,它们使用HTML 5 historyAPI,因此您需要使用它来在各条路线之间来回导航。
Switch
BrowserRouter
HashRouter
MemoryRouter
history
尝试这样做
import { BrowserRouter, Switch, Route } from 'react-router-dom';
然后把所有东西包起来
<BrowserRouter> <Switch> //your routes here </Switch> </BrowserRouter>