Question

我用React Router创建了以下内容。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 

class Main extends Component {

render() {   
        return ( 
    <Router>
     <Switch>
       <Route exact path='/' component={Content} />   
       <Route path='/user/:id' component={User} /> 
       <Route path='*' component={NotFound} />
     </Switch>  
    </Router>
    );
}

export default Main

如果URL无效，我想打开“未找到”页面。

我尝试打开localhost:3000/err，但是它不会转到NotFound组件。

我找不到的组件很简单。

import React from 'react';

const NotFound = () => (
    <h2>404 Page Not Found</h2>
);

export default NotFound;

我正在使用"react-router-dom": "^4.3.1

Answer 1

为了使客户端路由起作用，服务器需要始终为所有路由返回相同的index.html。

因此，localhost:3000/err需要使用客户端路由器javascript返回您的index.html。

Answer 2

您是否尝试过使用重定向？我在我的应用程序中使用了它，效果很好。这是更新的代码供您参考-

import {Route, Switch, Redirect } from 'react-router-dom'; 

class Main extends Component {

render() {   
        return ( 
     <Switch>
       <Route exact path='/' component={Content} />   
       <Route path='/user/:id' component={User} /> 
       <Route path="/not-found" render={props => <NotFoundPage />} />
       <Redirect to="not-found" />
     </Switch>  
    );
}

export default Main

将您的应用封闭在BrowserRouter内。

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './components/app.js'
import styles from './styles/style.css'
import { store } from './stores/store'

ReactDOM.render((
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
), document.getElementById('root'))

让我知道这是否有帮助。

Answer 3

最后我通过以下解决方法解决了

在我的webpack配置文件中，我添加了以下内容：

output: {
    publicPath: '/'
},

devServer: {\
    historyApiFallback: true
}

Answer 4

"react-router-dom": "^5.1.2",

<Router history={history}>
  <Switch>
    <Route exact path={[routes.user.details]} component={UserProfile} />
    <Route exact path={[routes.category.collection]} component={CategoryCollection} />
    <Route exact path={[routes.category.details]} component={CategoryDetails} />
    <Route exact path={[routes.product.collection]} component={ProductCollection} />
    <Route exact path={[routes.product.details]} component={ProductDetails} />

    <Route exact path={routes.auth.login} component={Login} />
    <Route exact path={routes.auth.register} component={Register} />
    <Route exact path={routes.auth.resetPassword} component={ResetPassword} />

    <Route
      path="*"
      component={() => {
        if (user.id) {
          return <Redirect to={routes.user.details} />;
        }

        return <Redirect to={routes.auth.login} />;
      }}
    />

  </Switch>
</Router>

反应路由器未打开404找不到页面

4 个答案: