这就是我定义App.js的App函数的方式
//App.js
function App(props) {
return (
<ConnectedRouter history={props.history}>
<div className="App">
<Switch>
<PublicRoute path="/landing" exact component={TestLanding} />
<PublicRoute path="/login" exact component={Login} />
<PublicRoute path="/signup" exact component={Signup} />
<PublicRoute path="/demowidget" exact component={DemoWidget} />
<PrivateRoute path="/dashboard/:itemNo/:itemId" exact component={Dashboard} />
<PrivateRoute path="/dashboard/:itemNo" exact component={Dashboard} />
<PrivateRoute path="/loggedinwidget" exact component={LoggedInWidget} />
<PrivateRoute path="/itemDetail" exact component={itemDetail} />
<PrivateRoute path="/manuallyadd" exact component={itemLookup} />
<PrivateRoute path="/customitemadd" exact component={CustomItem} />
<Redirect exact from="/" to="/landing" />
<Route render={() => <TestLanding />} />
</Switch>
</div>
</ConnectedRouter>
);
}
这是App的调用方式
//index.js
//history imported from index2.js
ReactDOM.render(
<Provider store={store}>
<FirebaseContext.Provider value={new Firebase()}>
<App history={history} />
</FirebaseContext.Provider>
</Provider>,
document.getElementById('root'),
);
这是我为App函数定义历史道具的方式
//index2.js
...
import { createBrowserHistory } from 'history';
...
export const history = createBrowserHistory();
但是,每次尝试从/dashboard/:itemNo/:itemId
转到/dashboard/:itemNo
时,我都会在网址末尾得到一个井号。我已经看到了here的解决方案,但是由于我在redux的动作创建者中使用了{ push } from ‘connected-react-router’
,所以我想继续使用ConnectedRouter。有解决方案吗?