reactjs 你不能< Router>在另一个中< Router>呈现一个,你的应用中不应该有多个,我该如何修复此错误？

rekjcdws 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(198)

这是app.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './Component/Navbar';
import Login from './Component/Login';
import Register from './Component/Register';

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Route exact path="/" component={Home} />
        <Route path="/Login" component={Login} />
        <Route path="/Register" component={Register} />
      </Router>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

export default App;

这是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

我已经尝试了一切来解决这个问题，但它仍然显示这个错误，我的React应用程序是空白的像嵌套路由器路由器。但任何东西都不起作用

reactjs

来源：https://stackoverflow.com/questions/75796995/you-cannot-render-a-router-inside-another-router-you-should-never-have-more

1条答案

按热度按时间

z31licg01#

该错误是因为您在index.js和app.js中都使用<BrowserRouter> Package 了App组件。您只需要 Package 一次。在这种情况下，您可以删除app.js中的<Router>来解决该错误。
以下是更新后的app.js，没有额外的<Router>：

import React from 'react';
import { Route } from 'react-router-dom';
import Navbar from './Component/Navbar';
import Login from './Component/Login';
import Register from './Component/Register';

function App() {
  return (
    <div className="App">
      <Navbar />
      <Route exact path="/" component={Home} />
      <Route path="/Login" component={Login} />
      <Route path="/Register" component={Register} />
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

export default App;

通过这些更改，错误应该得到解决，并且您的应用应该正确呈现。

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs 你不能< Router>在另一个中< Router>呈现一个,你的应用中不应该有多个,我该如何修复此错误？

1条答案

相关问题

热门标签

最新问答