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

IT技术 javascript reactjs routing
2021-05-23 19:01:13

我安装了 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

3个回答

裹BrowserRouter在你Switch喜欢的下方，

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

这是codeandbox 中的工作代码演示。

  1. 你没有导入 BrowserRouter
  2. 你应该包裹你的<Switch>arround<BrowserRouter>标签
  3. 比尝试渲染<Switch>元素更好地使用组件

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

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

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


<BrowserRouter>需要Kay Concepts，因为

  • 每个路由器都会创建一个历史对象，用于跟踪当前位置并在发生变化时重新呈现网站
  • 没有路由器作为其祖先之一的 React Router 组件将无法工作。
  • 路由器组件只希望接收一个子元素。要在此限制内工作，创建一个呈现应用程序其余部分的组件很有用。

<Route>

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

<Path>

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

<Switch>

  • 您可以使用该组件对 s 进行分组。
  • 将迭代其子元素（路由）并仅呈现与当前路径名匹配的第一个元素。

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

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

您可以创建要保存的组件，<Header>并且<MainContent> As<Header>将在整个应用程序中保持不变，并且如果路径更改，它也不会更改。您可以包含<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;

布局.js

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

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

应用程序.js

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

return(
<BrowserRoter>
  <Layout />
 </BrowserRouter>
);
}
}
其它你可能感兴趣的问题
上一篇为什么全局变量在 React 中执行两次 下一篇如何在reactjs的render方法中使用三元运算符？