Реагировать на открытую страницу маршрутизатора, используя URL

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

В содержании есть список пользователей с их фото. Если я нажму на фотографию человека, она перенаправит меня к определенному пользователю.

Я написал свой код как:

<Link to={'/user/' + userItem.id}>
     <img className="useritem-img" src={userItem.photo} alt={userItem.tagline}/>
</Link> 

Он откроет пользовательский компонент правильно с новым URL-адресом, таким как: http://localhost:3000/user/457365 при нажатии фотографии.

Но, если скопировать и вставить тот же URL в новую вкладку, он не откроется. Может быть, я ошибаюсь где-то.

Любая помощь будет принята с благодарностью.

Edit:

Я получаю следующую ошибку при открытии этой страницы:

Cannot GET / user / 457365

Я не использую приложение create-реагировать на приложения, просто приложение простого реагирования.

Ниже приведен мой server.js

app.use(express.static('dist'));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './index.html'));
});

app.listen(port, function (err) {
  if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
})

Answer 1

Если вы получаете эту ошибку, это означает, что сервер пытается обработать маршрутизацию. Поэтому вы должны убедиться, что сервер позволяет SPA обрабатывать маршрутизацию.

Например, если вы используете express, вы, вероятно, захотите сделать что-то вроде этого:

app.use(express.static(path.join(__dirname, 'client/build')));

app.get('/api/whatever', (req,res) => {
  // Whatever your api does
});

// Allow the SPA to take care of the routing
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});