反应路由中的错误 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>

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

Answer 1

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

我认为您不能这样做，您可能必须在构造函数中设置 url。

像这样：

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

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