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

任何帮助将不胜感激。

编辑：

当我打开该页面时出现以下错误：

无法获取 /user/457365

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

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