React router v4 - маршрут с параметрами отображает пустую страницу?

RBenn спросил: 28 марта 2018 в 01:36 в: reactjs

Я пытаюсь реализовать React Router v4 в приложении app-action-app и моих маршрутах, кроме маршрута с параметром /: id, поскольку он просто отображает пустую страницу. Я искал 2 дня и попробовал внедрить решения здесь, в которых говорится, чтобы добавить <base href="/" /> в главный раздел index.html, и я также пробовал следовать этому среднему руководству для простой маршрутизации, но он все еще не Работа. Я не понимаю, что происходит?

Мой код ниже, любая помощь очень ценится!

Index.js

ReactDOM.render((
<BrowserRouter>
    <App />
</BrowserRouter>), 
document.getElementById('root'));
registerServiceWorker();

App.js
class App extends Component {
  render() {
    return (
        <Routes />
    )
  }
}
Routes.js
export const Routes = () => {
    return (
        <main>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/movies" component={Search} />
            </Switch>
        </main>
    );
}

Search.js
render() {
        let filteredMovies = this.state.movies.filter((movie) => {
            return movie.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
        })        return (
            <div>
                <p>Search Page</p>
                <form>
                    <input type="text" value={this.state.search} onChange={this.updateSearch}/>
                </form>
                <div>
                    {filteredMovies.map((movie, idx) => 
                        <div>
                            <div key={idx}>
                                <Link to={`/movies/${movie.videoId}`}>
                                    <img src={movie.image.high.url} height="160px" width="100px" alt=""/>
                                    <p>{movie.title}</p>
                                    <p>{movie.quality}</p>
                                </Link>
                            </div>
                        </div>
                    )}
                </div>
                <Switch>
                    <Route path="/movies/:id" component={Single} />
                </Switch>
            </div>
        )
    }}export default Search;


1 ответ

Levitator Imbalance ответил: 28 марта 2018 в 01:59

Вы должны удалить exact из маршрута, который соответствует компоненту Search в вашем Routes, т.е. e.:

export const Routes = () => {
    return (
        <main>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/movies" component={Search} />
            </Switch>
        </main>
    );
}

Объяснение довольно простое: опора exact означает, что ваш компонент будет отображаться, только если текущий маршрут точно такой же, как вы указали в path prop


Update

Если вы хотите отобразить список фильмов только тогда, когда :id не указан, вы должен отобразить ваш список в Switch:

<Switch>
    <Route exact path="/movies" render={props => {
        return (
            <div>
                {filteredMovies.map((movie, idx) => 
                    <div>
                        <div key={idx}>
                            <Link to={`/movies/${movie.videoId}`}>
                                <img src={movie.image.high.url} height="160px" width="100px" alt=""/>
                                <p>{movie.title}</p>
                                <p>{movie.quality}</p>
                            </Link>
                        </div>
                    </div>
                )}
            </div>
        )
    } />
    <Route path="/movies/:id" component={Single} />
</Switch>
RBenn ответил: 28 марта 2018 в 01:50
Я удалил часть exact и теперь она отображает компонент Single внизу всего списка фильмов, а не на совершенно новой странице. В списке около 300 элементов, так как мне отобразить совершенно новую страницу, вместо того, чтобы прокручивать ее до конца, чтобы увидеть компонент Single внизу списка?
Levitator Imbalance ответил: 28 марта 2018 в 01:59
@RBenn Я обновил свой ответ
RBenn ответил: 28 марта 2018 в 02:15
Спасибо, это сработало! Я собирался спросить, почему, но я обнаружил, что <Switch> отображает маршрут исключительно так, что это объясняет.
Levitator Imbalance ответил: 29 марта 2018 в 10:00
@RBenn хитрость в том, что Switch отображает ровно один маршрут из списка маршрутов внутри него (ну, он работает как оператор JS switch () {...} по умолчанию): 3