无法使用 React 路由器功能

Question

我正在使用 React js 和 React 路由器构建一个新的 Web 应用程序。当我启动应用程序时，出现“You should not use <Route> or withRouter() outside a <Router>”错误。我已经分享了我的 Main.js 和 Index.js 文件。

Main.js:

import React, { Component } from "react";
import {Route,NavLink,HashRouter} from "react-router-dom";
import About from "./components/About";
import Contact from "./components/Contact";
import DashBoard from "./components/DashBoard";
import Home from "./components/Home";
import logo from './logo.svg';
import './App.css';

class Main extends Component {
  render() {
    return (
        <hashRouter>
        <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
          <h1>Simple SPA</h1>
          <ul className="header">
            <li><NavLink  to="/">Home</NavLink ></li>
            <li><NavLink  to="/Dashboard">Dashboard</NavLink ></li>
            <li><NavLink  to="/About">About</NavLink ></li>
            <li><NavLink  to="/contact">Contact</NavLink ></li>
          </ul>
          <div className="content">
            <Route path="/" component={Home}/>
            <Route path="/Dashboard" component={DashBoard}/>
            <Route path="/contact" component={Contact}/>
          </div>
        </div>
        </hashRouter>
    );
  }
}

export default Main;

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Main from './Main'
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

Answer 1

您的 Router 需要在 Main 之外，因此您的 index.js 应该如下所示：

ReactDOM.render(
    <HashRouter>
        <Main />
    </HashRouter>
), document.getElementById('root'));

Answer 2

如果您想现在修复，只需更新 package.json 中的依赖项版本并重新安装。

“依赖项”：{ "google-map-react": "^1.1.5", "mdbreact": "^4.25.0", “反应”：“^ 16.12.0”， “反应-dom”：“^16.12.0”， "react-router-dom": "^5.1.2", “反应脚本”：“3.3.0” },

无法使用 React 路由器功能

Unable to use React Router Function

reactjs

react-router-v4