Question

我无法路由到应用程序中的特定组件（WeatherDetails）

我尝试正常渲染该组件（在路线外），并且显示完美，但将其合并到中，没有任何显示，也没有错误消息。这里的代码

根组件

import WeatherDetail from './WeatherDetail';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

class WeatherForecast extends React.Component{
.
.
.
render(){
     return(
         <Router>
             <div className="weather-forecast">
                 <Nav value={"Weather Forecast"} />
                 <Switch>
                 <Route path="/" exact render={(props) => <WeatherDisplay {...props}   reports={this.state.reports} /> }  />
                 <Route path="/:name-of-day" component={WeatherDetail} />
                 </Switch>
             </div>  
         </Router>   
     );
 }
}

ReactDOM.render(<WeatherForecast />, document.getElementById('root'));

WeatherDetail组件

const WeatherDetail = () => (
     <div>
         <h1> More Information</h1>
     </div>
);

export default WeatherDetail;

路径规范

<Link to={`/${handleDay(report.dt)}`}>
                    <li key={report.dt} className="weather-item">
                        <Day day={handleDay(report.dt)} />
                        <Icon icon={report.weather[0].icon} />
                        <TempMax temp={report.main.temp_max} />
                        <TempMin temp={report.main.temp_min} />
                        <div className="text-cont">
                            <div className="text"> click for more </div>
                        </div>
                    </li>
                </Link>

当单击天气项目时，将显示weatherDetail组件，但什么也没有显示，并且我没有收到任何错误。请问我在做什么错，我该如何解决？

Answer 1

您可能对此行有疑问：

(?<=Freigaben: )([\S\s]*?)(?=\s[a-zA-Z]++:)

<Route path="/:name-of-day" component={WeatherDetail} />实际上是一个变量，可通过name-of-day在子组件上使用。我将其重写为props.match之类的驼峰式案例。将其更改为驼峰形即可解决您的问题。

nameOfDay

如何使“路线”组件正确渲染

1 个答案: