单击 link 时，为什么我的 React 应用会转到自定义 404 未找到页面？

Question

我的应用程序是使用 create-react-app 构建的。使用该应用程序后一切正常，除了当我从我的投资组合网站（在 MAMP 本地主机上）单击 link 时，它会加载自定义 404 页面而不是主页组件。当我从 npm 运行 start 加载应用程序时，它首先登陆 Home 组件，我希望它也能在本地主机和我的实时网站上执行此操作。

我试过将 package.json 中的 "homepage" 更改为“.”但它仍然做同样的事情。

 // App.js

 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Header from './components/layout/Header';
 import NotFound from './components/layout/NotFound';
 import Alert from './components/layout/Alert';
 import Home from './components/content/Home';
 import Movie from './components/content/movies/Movie';
 import AlertState from './context/alert/AlertState';
 import MovieState from './context/movies/MovieState';

 const App = () => {
     return (
         <MovieState>`enter code here`
             <AlertState>
                 <Router>
                     <Header text={"Movie App"}/>
                     <Alert />
                     <Switch>
                         <Route path='/' component={Home} />
                         <Route path='/movie/:title' component={Movie} />
                         <Route component={NotFound} />
                     </Switch>
                 </Router>
             </AlertState>
         </MovieState>
     );
 }

 export default App

package.json

    {
      "name": "film_app",
      "version": "0.1.0",
      "homepage": ".",
      "dependencies": {
        "axios": "^0.19.0",
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
        "react-router-dom": "^5.0.1",
        "react-scripts": "3.1.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

    // Home.js
    import React from 'react';
    import Search from './Search';
    import Movies from './movies/Movies';

    const Home = () => {
        return (
            <>
                <Search />
                <Movies />
            </>
        )
    }

    export default Home

    // NotFound.js
    import React from 'react';

    const NotFound = () => {
        return (
            <div>
                <h1>
                    Page Not Found
                    <p className='lead' style={notFoundStyles}>
                        The page you are looking for does not exist
                    </p>
                </h1>
            </div>
        )
    }

    const notFoundStyles = {
        textAlign: 'center',
    };

    export default NotFound

没有错误消息，只是显示 NotFound 组件而不是 Home 组件。

Answer 1

将 exact 标记添加到您的 Home 路由，并将 path='/' 添加到后备路由。

<Switch>
    <Route path='/' exact={true} component={Home} />
    <Route path='/movie/:title' component={Movie} />
    <Route path='/' component={NotFound} />
</Switch>

单击 link 时，为什么我的 React 应用会转到自定义 404 未找到页面？

Why does my react app go to the custom 404 not found page when the link is clicked?

javascript

reactjs

webpack

react-router

package.json