导航到chrome扩展中的默认主路由(React)

Question

我正在使用ReactJS构建一个新的chrome扩展，并尝试使用react router组件在'/'(默认(上重定向到现有路由

由于某种原因，当我将它编译到localhost时，我可以看到它，但当我将其作为chrome扩展上传时，我再也看不到它了。我想的是，也许还有另一条路线在chrome扩展中用作主路线，而不是"/"。

我试着安慰日志，但由于某种原因，它没有显示日志。

谢谢！

<div className="App">
<BrowserRouter>
<Navbar />
<Route
path="/"
exact
render={() => <Redirect to="/navigatehere" /> }
/>
<Route
path="/navigatehere"
exact
render={() => <NavigateHere />}
/>
</BrowserRouter>
</div>
);
}
export default App;

Answer 1

首先，您需要Switch才能使用exact道具。

你可以这样导入它。

import {BrowserRouter, Switch, Route}
// Then you have to use
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact /*render Whatever you want after this . . .*/ />
</Switch>
</div>
</BrowserRouter>

其次，我使用component道具而不是render()。

像这样-

import DummyComponent from './DummyFolder/DummyComponent;
import React from 'react'
import {BrowserRouter as Router, Switch, Route}
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact component={DummyComponent}/> // This will render the component in the respective path
</Switch>
</div>
</BrowserRouter>

但是，如果您使用<Switch>，render()也应该适用。对于路由器的其余部分，它在没有Switch的情况下工作，因为您没有将所有<Route />的path指定为"/"。如果要路由到"/"，则Switch是必需的。你也可以参考DevEd的YouTube频道了解更多。他在React Router上制作了一个独家视频。看看这里◀ ◀ ◀.