代码之家  ›  专栏  ›  技术社区  ›  ketan

React Router Not Open 404 Not Found页面

  •  0
  • ketan  · 技术社区  · 6 年前

    我用react路由器创建了following。

    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,我想打开NotFound页面。

    我试着打开 localhost:3000/err 但是,它不会转到未找到的组件。

    我找不到的组件很简单。

    import React from 'react';
    
    const NotFound = () => (
        <h2>404 Page Not Found</h2>
    );
    
    export default NotFound;
    

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

    3 回复  |  直到 6 年前
        1
  •  0
  •   Davin Tryon    6 年前

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

    所以, localhost:3000/err 需要使用客户端路由器javascript返回index.html。

        2
  •  0
  •   techie_questie    6 年前

    你试过使用重定向吗?我在我的应用程序中使用这个,它工作得非常好。这是更新后的代码供您参考-

    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
    

    把你的应用放在浏览器路由器里。

    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'))
    

    如果有帮助,请告诉我。

        3
  •  0
  •   ketan    6 年前

    最后,我通过以下解决方案解决了问题。

    在我的Webpack配置文件中,我添加了以下内容:

    output: {
        publicPath: '/'
    },
    
    devServer: {\
        historyApiFallback: true
    }