javascript - 为什么单击链接后我的应用程序会转到自定义404找不到页面？

我的应用是使用create-react-app构建的。我使用该应用程序后，一切正常，但当我单击我的投资组合网站(位于MAMP本地主机上)的链接时，它将加载自定义404页面而不是Home组件。当我从npm run加载应用程序启动时，它首先登陆Home组件，我希望它也可以在localhost和我的实时网站上执行此操作。

我尝试将package.json中的“首页”更改为“”。但它仍然做同样的事情。

 // 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组件。

最佳答案

在您的exact路由中添加Home标志，在后备路由中添加path='/'。

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

关于javascript - 为什么单击链接后我的应用程序会转到自定义404找不到页面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57950517/