react-routing中的错误404

Question

我有个问题。看看我的代码：

constructor(props){
    super(props);
    this.state = {
        url: '/' +this.props.lang+ '/panel',
        about: '',
        user: '',
        userPath: ''
    }


}

componentDidMount(){
    this.setState({
        about: this.state.url + '/about',
        user: this.state.url + '/user/1',
        userPath: this.state.url + '/user/:id',

    })
}

//View
                <div>
                    <Route exact path={this.state.url} component={Home} />
                    <Route path={this.state.about} component={About} />
                    <Route path={this.state.userPath} component={User} />
                </div>

大多数链接都是正确的，只有一个用户可以使用。如果我点击链接"user"，组件将被渲染。但是如果我刷新我的网站，我会出现错误404。任何其他链接都工作正常。当然，我可以打开/user (没有var，但是这个页面是空的)。错误404是如果我尝试打开/user/1。为什么？我在Laravel项目中使用React组件。

Answer 1

这是因为您在componentDidMount函数中设置了路径，因此，当页面加载时，所有的URL都是''。

我不认为你可以这样做，你可能需要在你的构造函数中设置urls。

如下所示：

const baseUrl = '/' +this.props.lang+ '/panel';

this.state = {
  url: baseUrl,
  about: baseUrl + '/about',
  user: baseUrl + '/user/1',
  userPath: baseUrl + '/user/:id'
}