这段代码有什么问题" this.props.params.filter"在react-router上

时间:2017-10-14 17:42:28

标签: reactjs react-router

我正在使用react-router-dom V4.2.2并且我有这个代码**** EDITED ****

""" MAIN WINDOW CREATION """
Root = Tk()
Root.title("Personal Project")

""" TOOLBAR """
Toolbar = Frame(Root, width = 1280, height = 25, bg = "grey", relief = RAISED)

""" TOOLBAR BUTTONS """
Search_Button = Button(Toolbar, text = "Search", command = 
DisplayAllArticles)
Search_Button.pack(side=LEFT, padx = 5, pady = 2)
Settings_Button = Button(Toolbar, text = "Settings")
Settings_Button.pack(side=LEFT, padx = 3, pady = 2 )
Author_Label = Label(Toolbar, text = "Prithvi")
Author_Label.pack(side = RIGHT, padx = 5, pady = 2)

Toolbar.pack(side = TOP, fill = X)

""" BROWSERS FRAME """
Browsers = Frame(Root, width = 1280, height = 695)
Browsers.pack(side = LEFT, expand = True, fill = BOTH)

""" ARTICLE BROWSER """
ArticleBrowser = Frame(Browsers, width = 427, height = 695)
ArticleBrowserScroll = Scrollbar(ArticleBrowser)
ArticleBrowserScroll.pack(side = RIGHT, fill = Y)
Contents = Canvas(ArticleBrowser, width = 427, height = 695)

Contents.config(yscrollcommand=ArticleBrowserScroll.set)
ArticleBrowserScroll.config(command=Contents.yview)


Contents.pack(side = LEFT, expand = False, fill = BOTH )
ArticleBrowser.pack(side = LEFT, expand = False, fill = BOTH)

"""Internet Browser"""
InternetBrowser = Frame(Browsers, width = 853, height = 695, bg = "orange")
InternetBrowser.pack(side = LEFT, expand = True, fill = BOTH)

Root.mainloop()

和这个

<BrowserRouter>
<div>
<Switch>
    <Route exact path="/" component={App}/>
    <Route exact path="/list-days" component={App}>
        <Route exact path=":filter" component={App}/>
    </Route>
    <Route exact path="/add-day" component={App}/>
    <Route component={Whoops404}/>
</Switch>
</div>
</BrowserRouter>

和这个

const filteredDays=(!filter || !filter.match(/sunny|rainy/))? days : days.filter(day => day[filter] )

最后这个

<thead>
        <tr>
            <th>Date</th>
            <th>Resort</th>
            <th>Rain</th>
            <th>Sun Shine</th>
        </tr>
        <tr>
            <td colSpan={4}>
                <Link to="/list-days" className="sub-li">All Days</Link>
                <Link to="/list-days/rainy" className="sub-li">Rainy Days</Link>
                <Link to="/list-days/sunny" >Sunny Days</Link>
            </td>
        </tr>
        </thead>
        <tbody>
            {filteredDays.map((day,i)=>
                <PartyDayRow Key={i}
                             {...day} />
                )}
        </tbody>

我试图做到这一点,当我点击雨天或晴天时,它会使用&#34; filteredDays&#34;过滤结果。但它不起作用。我一直收到这个错误,上面写着&#34; TypeError:无法读取属性&#39; filter&#39;未定义&#34;我注意到这个错误来自于&#34; filter = {this.props.params.filter}&#34;。我做错了什么?

0 个答案:

没有答案