Question

我试图在我的create-react-app应用程序中实现React Router v4，我的路由工作除了带有/：id参数的路由，因为它只是呈现一个空白页面。我已经搜索了2天，并尝试实施解决方案here，该解决方案将<base href="/" />添加到index.html的head部分，我也尝试了{{3}但它仍然无法正常工作。我不明白，发生了什么事？

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

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;

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

您应该从exact中与Search组件相对应的路线中移除Routes，i。 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>

React router v4 - 使用params的路由呈现空白页面？

1 个答案:

更新