reactjs - 反应路由器不能以非常基本的方式工作

Question

您好react-router以非常基本的方式实施。

应用程序.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import About from './pages/About';
import Home from './pages/Home';

function App() {
  return (
    <Router>
      <div className='App'>
        <Link to='/about'>About</Link>
        <Link to='/home'>Home</Link>

        <Switch>
          <Route to='/about' exact component={About}></Route>
          <Route to='/home' exact component={Home}></Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

index.js

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

我想知道为什么这个基本设置不起作用？

我使用 react-router-doc 版本5.2.0

Answer 1

好像您在 Route 组件上传递了错误的道具。

尝试改变

<Route to='/about' exact component={About}></Route>

至

<Route path='/about' exact component={About}></Route>

Answer 2

尝试这个

<Route exact path="/about" component={About} />

并更改此声明

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

至

import { Router, Switch, Route, Link } from 'react-router-dom';