javascript - 使用 URL react 路由器打开页面

Question

我是 React 编程的新手。试图解决我自己的问题，但坚持以下问题。

我有以下 React 路由器代码。

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 时，它不会打开。可能是我在某些地方错了。

如有任何帮助，我们将不胜感激。

编辑:

打开该页面时出现以下错误:

Cannot GET /user/457365

我没有使用 create-react-app，只是简单的 React 应用程序。

以下是我的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'));
});