Question

我有一个具有以下配置的React BrowserRouter。

<BrowserRouter>
        <div>
            <Switch>
                <Route path={`/`} component={Home} exact/>
                <Route path={`/about`} render={(props) => <About {...props}/>} exact/>
                <Route path={`/products/:id/:slug`} render={(props) => <Products {...props}/>} exact/>
            </Switch>
        </div>

在“关于页面”中，有带有以下标签的产品。如果我单击链接，则URL会更改，并且“产品”页面会正确显示。

<Link to={'/products/' + product.id + '/' + product.slug>{product.name }</Link>

但是，当我使用确切的网址直接进入“产品”页面时。渲染将无法正常工作。

 e.g localhost:3000/products/123/books

你知道是什么原因引起的吗？

Answer 1

我相信您的问题是，在您直接访问网址时会收到无法获取的错误消息。尝试在webpack.config.js

中设置historyApiFallback: true

Answer 2

在您的产品组件中使用

如果组件是全状态组件 this.props.match.params.id for id = 123 this.props.match.params.slug for slug = books

如果组件是无状态组件那么您需要使用“ withRouter”使以上行可用从“反应路由器”导入{withRouter};

并使用此方法包装函数

const MyComponent =（）=> {} 使用Router（MyComponent）导出默认值

应该可以！！！

Answer 3

要通过任何网址运行“客户端虚拟”路由，您需要服务器端支持-f.e. apache mod-rewrite。

已经被here插入

Answer 4

根据您的输入，我想说这是语法错误或组件中componentDidMount / useEffect的问题。

我想我虽然发现语法错误：“ product.slug>”

您应该在弹ug之后删除“>”，这样可能会很好！

Answer 5

据我了解这段代码：

<Link to={'/products/' + product.id + '/' + product.slug>{product.name }</Link>

会因为缺少右括号而产生语法错误。

应该是这样的：

<Link to={'/products/' + product.id + '/' + product.slug}>{product.name }</Link>

注意 product.slug 末尾的“}”

使用路径参数的React Router不起作用

5 个答案: