Nikulio
@Nikulio
NaN !== NaN

Как динамически добавить Route'ы в Реакте?

Всем привет
Я добавил новость и хочу добавить новый Route. Сейчас сделал так, но это не работает :

index.js :

<Provider store={store}>
      <Router history={history}>
        <App/>
      </Router>
    </Provider>,


App.js :

import React, { Component } from "react";
import { Switch, Route, withRouter } from "react-router-dom";
import { fetchStories } from "../ac";
import Header from "./Header/index";
import Dashboard from "./Dashboard/index";
import { connect } from "react-redux";

class App extends Component {
	componentWillMount() {
		this.props.fetchStories();
	}
	render() {
		let { stories } = this.props;
		const routes = stories ? (
			Object.keys(stories).map(element => {
				let url = stories[element].title;
				console.log(url);
				return (
					<Route
						key={stories[element].title}
						path={url}
						render={() => (
							<div className="app">
								<Header />
								<div>new</div>
							</div>
						)}
					/>
				);
			})
		) : (
			<div>loading</div>
		);
		return (
			<Switch>
				<Route
					path="/"
					exact
					render={() => (
						<div className="app">
							<Header />
							<Dashboard stories={this.props.stories} />
						</div>
					)}
				/>
				{/* <Route /> */}
				{routes}
			</Switch>
		);
	}
}

const mapDispatchToProps = {
	fetchStories
};

export default withRouter(
	connect(
		state => ({
			stories: state.stories
		}),
		mapDispatchToProps
	)(App)
);


Когда перехожу по урлу, то получаю белый экран
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Используйте route с параметром:
<Route path="/stories/:slug" component={Stories}/>
где slug это поле записи новости в БД, основанная ее имени. Подробнее о slug.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы