0

我的问题是它react-router-dom适用于主页，productList但不适用于Signin组件。我认为snowpack没有问题。但是我放了雪包配置文件，以防出现问题。奇怪的是我为主页和产品列表添加了一个标题，但我没有为Signin组件添加标题。但是在更改路由后，即使我没有将 Header 添加到Signin组件中，也会显示标题。我很困惑为什么会这样。

应用程序.jsx

import React from 'react';
import Homepage from './Containers/Homepage';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductList from './Containers/ProductList';
import Signin from './Containers/Signin';

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Homepage} />
          <Route path="/:slug" component={ProductList} />
          <Route exact path="/signin" component={Signin} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

登录.jsx

import { Typography } from '@material-ui/core';
import React from 'react';
import Layout from '../Components/Layout';

const Signin = () => {
  return (
    <div
      style={{
        marginTop: '10rem',
        paddingTop: '10rem',
        background: 'black',
        height: '100vh',
      }}
    >
      Signin
    </div>
  );
};

export default Signin;

页眉.jsx

这个文件很大。但我正在添加路由调用。

const handleButtonClick = (pageURL) => {
  history.push(pageURL);
};

<Button variant="contained" onClick={() => handleButtonClick('/signin')}>
  Login
</Button>;

snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } /
module.exports = {
mount: {
/ ... /
public: "/",
src: "/dist",
},
plugins: ["@snowpack/plugin-react-refresh"],
routes: [
{ match: "all", src: "/api/.", dest: (req, res) => proxy.web(req, res) },
{ match: "routes", src: ".", dest: "/index.html" },
],
optimize: {
/ Example: Bundle your final build: /
// "bundle": true,
},
packageOptions: {
polyfillNode: true,
},
devOptions: {
port: 3000,
},
buildOptions: {
/ ... */
},
};

包.json

{
  "name": "ecommerce-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@snowpack/plugin-webpack": "^2.3.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "formik": "^2.2.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-query": "^3.13.12",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "snowpack dev",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@snowpack/plugin-react-refresh": "^2.5.0",
    "snowpack": "^3.3.7"
  }
}

在我打我的笔记本电脑屏幕之前，任何帮助都将不胜感激。谢谢。

4

2 回答 2

0

问题在于

<Route path="/:slug" component={ProductList} />
<Route exact path="/signin" component={Signin} />

/:slug因为第一个路由接受所有内容并在除/Homepage 之外的每个请求上呈现 productList，因为它具有确切的属性。

您可以将其位置与 signIn 组件互换以获得正确的组件渲染。像这样

<Route exact path="/signin" component={Signin} />
<Route path="/:slug" component={ProductList} />
于 2021-05-18T11:07:23.970 回答
0

这条路线：

<Route path="/:slug" component={ProductList} />

是匹配的/signin，其中signin被视为参数:slug。事实上，这条路线几乎可以匹配除 之外的任何路径/，因为您没有确切的道具。路径/a/b/c/d是匹配a的，参数在哪里:slug。

我会将开关重组为如下所示：

<Switch>
    <Route path="/" exact component={Homepage} />
    <Route exact path="/signin" component={Signin} />
    <Route path="/:slug" component={ProductList} />
</Switch>

它现在将选择第一个匹配路径，即您的静态路由。如果您不希望在这里匹配所有路径，我也可能会创建/:slug路径。exact

于 2021-05-18T11:09:39.387 回答