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

时间:2019-09-17 16:14:47

标签: reactjs react-router

我无法路由到应用程序中的特定组件(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组件,但什么也没有显示,并且我没有收到任何错误。请问我在做什么错,我该如何解决?

1 个答案:

答案 0 :(得分:1)

您可能对此行有疑问:

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

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

nameOfDay