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

Question

[Nikita Shchypylov]

Я добавил новость и хочу добавить новый 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)
);

Когда перехожу по урлу, то получаю белый экран.

Answer 1

[Антон Спирин]

Используйте route с параметром:
<Route path="/stories/:slug" component={Stories}/>
где slug это поле записи новости в БД, основанная ее имени. Подробнее о slug.

Comments

[Nikita Shchypylov]

Спасибо, гляну.
Еще один вопрос - я могу с помощью history.push передать свойства в комплнент, который я рендерю в Route?

[Антон Спирин]

Nikita Shchypylov,

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

В целевом компоненте:
this.props.location.state.detail;

[Nikita Shchypylov]

Антон Спирин, ааааа, про location не знал. Спасибо, Антон