React路由器dom适用于某些组件但不适用于另一个组件

如何解决React路由器dom适用于某些组件但不适用于另一个组件

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

App.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;

Signin.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;

Header.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: {
/ ... */
},};

package.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"
  }
}

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

解决方法

问题在于

<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} />

这条路线：

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

是 /signin 的匹配项，其中 signin 被视为参数 :slug。事实上，这条路线几乎可以匹配任何路径，除了/，因为你没有一个精确的道具。路径 /a/b/c/d 是匹配项，其中 a 是参数 :slug。

我会将 switch 重构为如下所示：

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

它现在会选择第一个匹配的路径，也就是你的静态路由。如果您不希望在此处匹配所有路径，我也可能将 /:slug 路径设为 exact。