React router v4 - 带有参数的路由呈现空白页面？

Question

我正在尝试在我的 create-react-app 应用程序中实现 React Router v4，我的路由工作除了带有 /:id 参数的路由，因为它只是呈现一个空白页面。我已经搜索了 2 天并尝试实施解决方案 here，它表示将 <base href="/" /> 添加到 index.html 的头部，我也尝试过遵循此 Medium guide for simple routing 但它仍然不起作用。我不明白，这是怎么回事？

我的代码如下，非常感谢任何帮助！

索引.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>
    );
}

搜索.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;

Single.js

class Single extends Component {
    render() {
        return (
            <div>
                <p>Single Movie...</p>
                {this.props.match.params.id}
            </div>
        )
    }
} 

export default withRouter(Single);

除了 /movies/:id 之外，每条路线都有效，它只是呈现一个完全空白的页面。它甚至没有显示<p>Single Movie...</p>。

Answer 1

您应该从与您的Routes 中的Search 组件对应的路由中删除exact，即。 e.：

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

解释很简单：exact 属性意味着只有当当前路由与您在path 属性中指定的路径完全相同时，您的组件才会渲染

---

更新

如果您只想在未指定: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>