reactjs - 如何在 ReactJS 中创建浏览器路由器？

Question

我发现在 React 中创建浏览器路由很困难。这是我想要做的:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Navbar from './components/navbar/Navbar';
import RecipeList from './containers/recipe-list/RecipeList';
import Recipe from './containers/recipe-details/RecipeDetails';
import Footer from './components/footer/Footer';
import Error from './components/error/Error';
import './App.css';

export default function App() {
  return (
    <div>
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RecipeList} />
          <Route path="./containers/recipe-details/RecipeDetails" component={Recipe} />
          <Route component={Error} />
        </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}


import React from 'react';
import { Link } from 'react-router-dom';

export default function Recipe() {
  return (
    <div>
      <Link to="../../containers/recipe-details/RecipeDetails">Recipe</Link>
    </div>
  );
}

问题出在我的 Recipe我想为其创建单独路由的组件。
感谢您的回复。

Answer 1

Route的路径是浏览器中将显示该组件的链接，而不是目录结构中组件的路径，您可以设置您的 Route和 Link像下面

export default function App() {
  return (
    <div>
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RecipeList} />
          <Route path="/recipe" component={Recipe} />
          <Route component={Error} />
        </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

import React from 'react';
import { Link } from 'react-router-dom';

export default function Recipe() {
  return (
    <div>
      <Link to="/recipe">Recipe</Link>
    </div>
  );
}