javascript - 如何使用 react-router-dom 进行路由？

Question

我安装了 react-router-dom 并使用此代码进行路由，但我有错误:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';


class Home extends React.Component{
    render(){
        return(
            <h1>Home</h1>
        );
    }
}

class About extends React.Component{
    render(){
        return(
            <h1>About</h1>
        );
    }
}

ReactDOM.render(
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
    </Switch>,
    document.getElementById('main')
);

在 reactjs 中路由的正确方法是什么？

发送

Answer 1

将 BrowserRouter 包裹在您的 Switch 周围，如下所示，

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

这是 codesandbox 中的工作代码演示.