如何使用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')
);

在 React.js 中进行路由的正确方式是什么？

谢谢。

- Mohammad

---

什么是错误？你能发布错误信息吗？ - Elumalai Kaliyaperumal

@ElumalaiKaliyaperumal：你不应该在<Router>之外使用<Switch>。 - Mohammad

将 BrowserRouter 包裹在您的 Switch 路由周围。那可能是问题所在。请参阅更新的答案。 - Elumalai Kaliyaperumal

@ElumalaiKaliyaperumal 非常感谢您 :-) - Mohammad

Answer 1

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

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

这是一个关于IT技术的代码示例，你可以在codesandbox网站上查看它的运行效果。

- Elumalai Kaliyaperumal

Answer 2

1. 您未导入BrowserRouter
2. 您应该将<Switch>标签包装在<BrowserRouter>标签周围
3. 最好使用组件而不是尝试渲染<Switch>元素

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

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

我还制作了一个快速的笔记：https://codepen.io/FabienGreard/pen/KZgwKO?editors=1010

- Fabien Greard

---

非常感谢。 - Mohammad

Answer 3

Kay Concepts
<BrowserRouter> 是必须的，因为：

• 每个路由器都会创建一个历史对象，用于跟踪当前位置并在其更改时重新渲染网站
• 如果一个React Router组件没有路由器作为其祖先之一，则无法工作。
• 路由器组件只希望接收单个子元素。为了在此限制内工作，创建一个组件以呈现应用程序的其余部分非常有用。

<Route>

• 该组件是React Router的主要构建块。任何您想要仅基于位置路径名呈现内容的地方，都应使用<Route>元素。

<Path>

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

<Switch>

• 您可以使用该组件来分组路由。
• <Switch>将遍历其子元素（路由），并仅呈现与当前路径名相匹配的第一个元素。

我认为你应该为路由创建不同的组件。

我将在这里解释一般的项目结构。

你可以创建一个组件来容纳<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>
);
}
}

- Pushpanjali