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中路由的正确方法是什么？

TNX

Answer 1

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

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

以下是codesandbox中的工作代码演示。

Answer 2

您没有导入BrowserRouter
您应该包裹<Switch> arround <BrowserRouter>代码
更好地使用组件而不是尝试呈现<Switch>元素

您可以在此链接中找到您要找的任何内容：

https://reacttraining.com/react-router/web/guides/philosophy

我也快速写了一笔：https://codepen.io/FabienGreard/pen/KZgwKO?editors=1010

Answer 3

Kay概念
需要 <BrowserRouter> 是因为

每个路由器都会创建一个历史记录对象，该对象可用于跟踪当前位置并在更改时重新渲染网站
没有路由器作为其祖先之一的React Router组件将无法工作。
路由器组件仅期望接收一个子元素。为了在此限制内工作，创建一个呈现应用程序其余部分的组件很有用。

<Route>

该组件是React Router的主要构建块。您只想根据位置的路径名呈现内容的任何地方，都应该使用一个元素。

<Path>

当当前位置的路径名与该路径匹配时，该路线将呈现一个React元素。

<Switch>

您可以使用该组件对进行分组。
该对象将遍历其子元素（路线），并且仅呈现与当前路径名匹配的第一个元素。

我认为您应该为Routes创建不同的组件。

我将在这里解释总体项目结构

您可以创建要容纳<Header>和<MainContent>的组件由于<Header>将遍历整个应用程序，并且如果路径更改，它也不会更改。您可以在<MainContent>中包含路由，如果路径更改，路由会更新。

MainContent.js

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

  const MainContent = () => (
    <main>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
      </Switch>
    </main>
 )

 export default MainContent;

Layout.js

class Layout extends Component {
     render() {
        return (
            <div className={classes.root}>
                <Header />
                <MainContent />
            </div>
        );
}

现在，您可以使用<BrowserRouter>将<Layout>包装在App.js中。或者您也可以在<MainContent>中使用它

App.js

import { BrowserRouter } from "react-router-dom";
class App extends  Component {
render() {

return(
<BrowserRoter>
  <Layout />
 </BrowserRouter>
);
}
}

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

3 个答案: