React роутер не открыт 404 страница не найдена

Question

Я создал следующий с реагировать маршрутизатор.

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

Я хочу открыть страницу Notfound, если есть недействительный 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

Вы пробовали использовать Redirect?Я использую это в моем приложении, и оно прекрасно работает.Вот обновленный код для вашей справки -

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 2

Наконец я решил следующее решение.

Внутри моего файла конфигурации webpack я добавил следующее:

output: {
    publicPath: '/'
},

devServer: {\
    historyApiFallback: true
}

Answer 3

Чтобы клиентская маршрутизация работала, сервер должен всегда возвращать один и тот же index.html для всех маршрутов.

Итак, localhost:3000/err необходимо вернуть ваш index.html с клиентским JavaScript-маршрутизатором.