如何使用react-router-dom进行路由？ [英] How routing with react-router-dom?

问题描述

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

I installed react-router-dom and use this code for routing, But i have error :

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中路由的方式？

What's the right way for routing in reactjs ?

tnx

推荐答案

包裹 BrowserRouter 围绕 Switch ，如下所示，

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

以下是 codesandbox 。

这篇关于如何使用react-router-dom进行路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！