Question

我可以刷新页面，但是当我在chrome中使用“后退”和“前进”按钮时，我的应用程序就会中断。我收到此错误：未捕获的TypeError：this.props.cars.map不是函数。我是React Router的新手，我觉得这应该很容易。

这是我的App组件：

import React, { Component } from "react";

import { BrowserRouter, Route, Switch } from "react-router-dom";

import CarsIndex from "../containers/cars_index";
import CarNew from "../containers/car_new";
import CarShow from "../containers/car_show";
import Error from "./error";

function App() {
	return (
		<Switch>
			<Route path="/" component={CarsIndex} exact />
			<Route path="/new" component={CarNew} />
			<Route path="/show/:id" component={CarShow} />
			<Route component={Error} />
		</Switch>
	);
}

export default App;

这是我的index.jsx：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import reduxPromise from "redux-promise";
import logger from "redux-logger";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { createBrowserHistory } from "history"; 

import "../assets/stylesheets/application.scss";

import App from "./components/app";

import carsReducer from "./reducers/cars_reducer.jsx";

const initialState = {
	garage: "lenny",
	cars: [],
};

const reducers = combineReducers({
	garage: (state = null, action) => state,
	cars: carsReducer,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const middleWares = composeEnhancers(applyMiddleware(logger, reduxPromise));

// render an instance of the component in the DOM
ReactDOM.render(
	<Provider store={createStore(reducers, initialState, middleWares)}>
		<Router>
			<App />
		</Router>
	</Provider>,
	document.getElementById("root")
);

谢谢。

如何使用React Router v5来回导航？

0 个答案: