javascript - 使用 react-router 时如何渲染新页面

Question

这是react -router-shoe-store-app 的代码发送框，它不能完美运行。当我单击每只鞋时，它不会呈现新页面，而是会更改 url 但不会更改整个 dom，只需在页面的右侧和底部进行更改。

标签： javascriptreactjs

Answer 1

你几乎有小问题。你需要Switch代替Routes和component道具而不是element道具。进行了以下更改，并让您的项目在codesandbox上运行。

您需要将 App.js 更改为：

import React from "react";
import { Home } from "./Components/Home/Home";
import { ShoesBrandLaunch } from "./Components/ShoeDetails/ShoesBrandLaunch";
import { ShoeLaunch } from "./Components/ShoeDetails/ShoeLaunch";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/nike" component={ShoesBrandLaunch}>
          <Route path=":slug" component={ShoeLaunch} />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;