Question

我的版本为“ react-router-dom”：“ ^ 5.0.1”，并且我的应用程序未按教程中的说明加载。

我尝试更改代码，因为该人使用的是旧版本。

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import about from './components/about';
import work from './components/workSection';
import contact from './components/contact';
import main from './components/main';


function App() {
  return (

    <BrowserRouter>
    <Switch>
    <Route path="/" exact component={main}>
    <Route path={"about"} component={about}/>
    <Route path={"workSection"} component={work}/>
    <Route path={"contact"} component={contact}/>
    </Route>
    </Switch>
    </BrowserRouter>

  );
}

export default App;

每当我运行我的应用程序时，都应该打开我的主页

Answer 1

您path的值必须以/开头。另外，我认为您不能将孩子<Route>包裹在父<Route>中。您可以尝试以下解决方案：

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/about" component={about} />
        <Route path="/workSection" component={work} />
        <Route path="/contact" component={contact} />
        <Route path="/" exact component={main} />
      </Switch>
    </BrowserRouter>

  );
}

Answer 2

在react-router-v4中，您不会嵌套<Routes />。

您应分别添加每个路线。同样，每个路由路径都应以/开头。

<Switch>
    <Route path="/" exact component={main} />
    <Route path="/about" component={about}/>
    <Route path="/workSection" component={work}/>
    <Route path="/contact" component={contact}/>
</Switch>

注意：您必须使用PascalCase个组件名称。

Answer 3

这是有效的示例https://codesandbox.io/s/eloquent-wildflower-50c6b?fontsize=14

您应该以 / 开头路径，以加载路线。

在上述示例中，默认情况下它将加载Main路由，当您将URL更改为/about时，它将加载about路由

当前我的应用程序中的路线存在问题

3 个答案: